From 0d6de7d2656ac00b7b9fbde638ea41398bc47b64 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 30 Oct 2025 18:32:01 -0400
Subject: [PATCH] Remove library.add() calls from Vue components

Updated components to import icon objects directly instead of using library.add(). Components now bind icons with :icon="faIconName" rather than icon="fa-icon-name".
---
 .../src/components/Citation/CitationItem.vue  |  3 --
 .../common/CellDiscardComponent.vue           |  6 +--
 .../common/CellStatusComponent.vue            |  9 ++---
 .../Collections/common/CollectionEditView.vue |  5 +--
 .../common/PairedDatasetCellComponent.vue     | 12 +++---
 .../sheet/DownloadWorkbookButton.vue          |  5 +--
 client/src/components/Common/DelayedInput.vue |  3 --
 client/src/components/Common/FilterMenu.vue   |  3 --
 .../components/Common/FilterMenuDropdown.vue  |  3 --
 .../src/components/Common/FilterMenuInput.vue |  3 --
 .../Common/FilterObjectStoreLink.vue          |  5 +--
 client/src/components/Common/ListHeader.vue   |  3 --
 .../ConfigTemplates/VaultSecret.vue           |  3 --
 client/src/components/CopyToClipboard.vue     | 10 +++--
 client/src/components/Dataset/DatasetName.vue |  5 +--
 .../DatasetInformation/DatasetAttributes.vue  |  3 --
 .../DatasetInformation/DatasetSource.vue      |  3 --
 client/src/components/DragGhost.vue           |  3 --
 client/src/components/ExternalLink.vue        |  5 +--
 .../Form/Elements/FormDirectory.vue           | 18 +++++----
 .../Form/Elements/FormRulesEdit.vue           |  5 +--
 .../components/Form/Elements/FormSelect.vue   |  3 --
 .../Form/Elements/FormSelection.vue           |  5 +--
 client/src/components/Form/FormCard.vue       | 13 +++----
 client/src/components/Form/FormElement.vue    |  5 ---
 client/src/components/GalaxyWizard.vue        |  2 -
 .../Grid/GridElements/GridExpand.vue          |  3 --
 client/src/components/Grid/GridList.vue       |  9 ++---
 client/src/components/Grid/GridPage.vue       |  3 --
 .../src/components/Grid/GridVisualization.vue |  4 --
 .../History/Archiving/IncludedBadge.vue       |  7 +---
 .../History/Content/ContentItem.vue           | 11 +-----
 .../Content/Dataset/DatasetActions.vue        |  3 --
 .../Content/Dataset/DatasetDownload.vue       |  3 --
 .../CollectionNavigation.vue                  |  3 --
 .../History/CurrentHistory/HistoryCounter.vue |  5 +--
 .../History/CurrentHistory/HistoryEmpty.vue   |  3 --
 .../CurrentHistory/HistoryMessages.vue        |  3 --
 .../HistoryOperations/DefaultOperations.vue   |  3 --
 .../HistoryOperations/HistoryOperations.vue   |  3 --
 .../components/History/HistoryIndicators.vue  |  3 --
 .../History/Layout/DetailsLayout.vue          |  3 --
 .../History/Multiple/MultipleView.vue         |  5 +--
 .../History/Multiple/MultipleViewItem.vue     |  3 --
 .../History/Multiple/MultipleViewList.vue     |  3 --
 .../History/SwitchToHistoryLink.vue           |  3 --
 .../components/HistoryExport/ExportLink.vue   |  6 +--
 client/src/components/HistoryImport.vue       | 13 +++----
 client/src/components/Indices/IndexFilter.vue |  9 ++---
 .../components/Indices/SharingIndicators.vue  | 11 ++----
 .../InheritanceChain/InheritanceChain.vue     |  6 +--
 .../src/components/JobInformation/CodeRow.vue |  6 +--
 .../components/JobInformation/JobError.vue    |  5 +--
 .../CarbonEmissions/CarbonEmissions.vue       |  5 +--
 .../CarbonEmissions/CarbonEmissionsIcon.vue   | 28 ++++----------
 .../FolderDetails/FolderDetails.vue           |  4 --
 .../LibraryFolderDataset/LibraryDataset.vue   |  5 ---
 .../components/Markdown/MarkdownEditor.vue    |  4 --
 .../Broadcasts/BroadcastContainer.vue         | 11 ------
 .../Notifications/NotificationsBell.vue       |  3 --
 .../Notifications/NotificationsList.vue       | 13 +++----
 .../PageEditor/PageEditorMarkdown.vue         |  4 --
 .../Panels/Common/ToolPanelLinks.vue          |  4 --
 .../components/Panels/Common/ToolSection.vue  |  3 --
 client/src/components/Panels/FlexPanel.vue    |  4 --
 .../src/components/Panels/MultiviewPanel.vue  |  5 +--
 client/src/components/Popper/Popper.vue       |  4 --
 .../components/SchemaOrg/CreatorEditor.vue    | 10 ++---
 .../components/SchemaOrg/OrganizationForm.vue |  8 ++--
 .../SchemaOrg/OrganizationViewer.vue          |  9 ++---
 .../src/components/SchemaOrg/PersonForm.vue   |  8 ++--
 .../src/components/SchemaOrg/PersonViewer.vue | 10 ++---
 .../SelectionDialog/DataDialogSearch.vue      |  5 +--
 .../SelectionDialog/SelectionDialog.vue       |  4 +-
 client/src/components/Sharing/EditableUrl.vue |  9 ++---
 .../Sharing/Embeds/WorkflowEmbed.vue          |  5 +--
 client/src/components/Sharing/SharingPage.vue |  4 --
 client/src/components/StsDownloadButton.vue   |  8 ++--
 .../TagsMultiselect/HeadlessMultiselect.vue   | 13 +++----
 client/src/components/TagsMultiselect/Tag.vue |  5 +--
 client/src/components/Tool/ToolFooter.vue     | 18 +++++----
 .../components/Tool/ToolSourceMenuItem.vue    |  5 +--
 .../Tool/ToolTutorialRecommendations.vue      |  7 +---
 .../ToolEntryPoints/ToolEntryPoints.vue       | 12 +++---
 .../ToolsList/ScrollToTopButton.vue           |  5 +--
 client/src/components/Upload/CompositeRow.vue | 15 +++-----
 client/src/components/Upload/DefaultRow.vue   |  9 ++---
 client/src/components/Upload/RulesInput.vue   | 13 +++----
 .../src/components/Upload/UploadExtension.vue |  5 +--
 client/src/components/Upload/UploadOption.vue |  7 +---
 .../Upload/UploadSelectExtension.vue          |  5 +--
 .../src/components/Upload/UploadSettings.vue  |  5 +--
 .../src/components/User/APIKey/APIKeyItem.vue |  5 +--
 .../RecoverableItemSizeTooltip.vue            |  5 +--
 .../User/DiskUsage/Visualizations/util.ts     |  3 --
 .../NotificationsChannelSettings.vue          |  3 --
 .../NotificationsPreferences.vue              |  3 --
 .../Workflow/Editor/Comments/FrameComment.vue | 11 ++----
 .../Editor/Comments/MarkdownComment.vue       |  7 +---
 .../Workflow/Editor/Comments/TextComment.vue  |  7 +---
 .../Editor/Forms/FormColumnDefinitions.vue    |  4 --
 .../src/components/Workflow/Editor/Index.vue  | 20 +++-------
 .../src/components/Workflow/Editor/Lint.vue   |  9 ++---
 .../Workflow/Editor/LintSection.vue           | 28 ++++++++------
 .../src/components/Workflow/Editor/Node.vue   |  5 +--
 .../components/Workflow/Editor/NodeInput.vue  |  7 +---
 .../components/Workflow/Editor/NodeOutput.vue | 17 ++++-----
 .../Workflow/Editor/SaveChangesModal.vue      |  3 --
 .../Workflow/Editor/Tools/ToolBar.vue         | 37 ++++++-------------
 .../components/Workflow/Import/TrsSearch.vue  |  3 --
 .../Workflow/Import/TrsServerSelection.vue    |  3 --
 .../components/Workflow/Import/TrsTool.vue    |  3 --
 .../Invocation/Export/ExportButton.vue        |  4 +-
 .../Invocation/Graph/InvocationGraph.vue      | 14 +------
 .../Workflow/List/WorkflowListActions.vue     |  3 --
 .../Published/WorkflowInformation.vue         |  7 +---
 .../Workflow/Published/WorkflowPublished.vue  |  5 +--
 .../Published/WorkflowPublishedButtons.vue    |  5 +--
 .../Workflow/Run/WorkflowRunDefaultStep.vue   |  5 +--
 .../components/Workflow/WorkflowCreate.vue    |  3 --
 client/src/components/admin/AdminHome.vue     |  4 --
 .../admin/Notifications/BroadcastCard.vue     |  3 --
 .../admin/Notifications/BroadcastsList.vue    |  3 --
 123 files changed, 225 insertions(+), 597 deletions(-)

diff --git a/client/src/components/Citation/CitationItem.vue b/client/src/components/Citation/CitationItem.vue
index 5fd1f68053b..bd16fde0a94 100644
--- a/client/src/components/Citation/CitationItem.vue
+++ b/client/src/components/Citation/CitationItem.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
 import type { Citation } from ".";
 
-library.add(faExternalLinkAlt);
-
 interface Props {
     citation: Citation;
     outputFormat?: string;
diff --git a/client/src/components/Collections/common/CellDiscardComponent.vue b/client/src/components/Collections/common/CellDiscardComponent.vue
index 59e0d092297..b8c5a34e9bf 100644
--- a/client/src/components/Collections/common/CellDiscardComponent.vue
+++ b/client/src/components/Collections/common/CellDiscardComponent.vue
@@ -1,14 +1,11 @@
 <script lang="ts">
 /* cannot use a setup block and get params injection in Vue 2.7 I think */
 
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { ICellRendererParams } from "ag-grid-community";
 import { defineComponent } from "vue";
 
-library.add(faTimes);
-
 export default defineComponent({
     components: {
         FontAwesomeIcon,
@@ -16,6 +13,7 @@ export default defineComponent({
     data() {
         return {
             params: {} as ICellRendererParams,
+            faTimes,
         };
     },
     computed: {},
@@ -28,7 +26,7 @@ export default defineComponent({
 </script>
 <template>
     <div>
-        <FontAwesomeIcon size="2x" icon="fa-times" @click="onRemove" />
+        <FontAwesomeIcon size="2x" :icon="faTimes" @click="onRemove" />
     </div>
 </template>
 
diff --git a/client/src/components/Collections/common/CellStatusComponent.vue b/client/src/components/Collections/common/CellStatusComponent.vue
index 8f548aff3bc..9f106ba04f2 100644
--- a/client/src/components/Collections/common/CellStatusComponent.vue
+++ b/client/src/components/Collections/common/CellStatusComponent.vue
@@ -1,15 +1,12 @@
 <script lang="ts">
 /* cannot use a setup block and get params injection in Vue 2.7 I think */
 
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { ICellRendererParams } from "ag-grid-community";
 import { BPopover } from "bootstrap-vue";
 import { defineComponent } from "vue";
 
-library.add(faCheck, faExclamationTriangle);
-
 export default defineComponent({
     components: {
         BPopover,
@@ -18,6 +15,8 @@ export default defineComponent({
     data() {
         return {
             params: {} as ICellRendererParams,
+            faCheck,
+            faExclamationTriangle,
         };
     },
     computed: {
@@ -48,9 +47,9 @@ export default defineComponent({
         },
         icon() {
             if (this.isDuplicate || this.requiresPairing) {
-                return "fa-exclamation-triangle";
+                return this.faExclamationTriangle;
             } else {
-                return "fa-check";
+                return this.faCheck;
             }
         },
     },
diff --git a/client/src/components/Collections/common/CollectionEditView.vue b/client/src/components/Collections/common/CollectionEditView.vue
index 997e36cf8cb..17d1e2e64b4 100644
--- a/client/src/components/Collections/common/CollectionEditView.vue
+++ b/client/src/components/Collections/common/CollectionEditView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBars, faCog, faDatabase, faSave, faTable, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faCog, faDatabase, faSave, faTable } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import { BAlert, BSpinner, BTab, BTabs } from "bootstrap-vue";
@@ -26,8 +25,6 @@ import Heading from "@/components/Common/Heading.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faBars, faCog, faDatabase, faSave, faTable, faUser);
-
 interface Props {
     collectionId: string;
 }
diff --git a/client/src/components/Collections/common/PairedDatasetCellComponent.vue b/client/src/components/Collections/common/PairedDatasetCellComponent.vue
index f12a7ef8338..1c60f199e26 100644
--- a/client/src/components/Collections/common/PairedDatasetCellComponent.vue
+++ b/client/src/components/Collections/common/PairedDatasetCellComponent.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 /* cannot use a setup block and get params injection in Vue 2.7 I think */
 
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faLink, faUndo, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { ICellRendererParams } from "ag-grid-community";
@@ -13,8 +12,6 @@ import { showHid } from "./useCollectionCreator";
 
 type StoreType = ReturnType<typeof usePairingDatasetTargetsStore>;
 
-library.add(faLink, faUndo, faUnlink);
-
 export default defineComponent({
     components: {
         FontAwesomeIcon,
@@ -23,6 +20,9 @@ export default defineComponent({
         return {
             params: {} as ICellRendererParams,
             showHid: showHid,
+            faLink,
+            faUndo,
+            faUnlink,
         };
     },
     computed: {
@@ -97,8 +97,8 @@ export default defineComponent({
 <template>
     <div>
         <div v-if="isPaired" class="paired-datasets-cell">
-            <FontAwesomeIcon size="2x" icon="fa-undo" class="paired-action-icon" @click="onSwap" />
-            <FontAwesomeIcon size="2x" icon="fa-unlink" class="paired-action-icon" @click="onUnpair" />
+            <FontAwesomeIcon size="2x" :icon="faUndo" class="paired-action-icon" @click="onSwap" />
+            <FontAwesomeIcon size="2x" :icon="faUnlink" class="paired-action-icon" @click="onUnpair" />
             <div class="text-container">
                 <span>
                     <span class="direction">FORWARD</span>
@@ -126,7 +126,7 @@ export default defineComponent({
                 @drop="onDrop">
                 <FontAwesomeIcon
                     size="2x"
-                    icon="fa-link"
+                    :icon="faLink"
                     class="paired-action-icon"
                     :class="{ dragging: dragging, 'active-target': isUnpairedTarget, 'fa-beat': isUnpairedTarget }" />
             </div>
diff --git a/client/src/components/Collections/sheet/DownloadWorkbookButton.vue b/client/src/components/Collections/sheet/DownloadWorkbookButton.vue
index aec1084ec9e..fecfd76c227 100644
--- a/client/src/components/Collections/sheet/DownloadWorkbookButton.vue
+++ b/client/src/components/Collections/sheet/DownloadWorkbookButton.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faFileExcel } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 
-library.add(faFileExcel);
-
 interface Props {
     title: string;
 }
@@ -17,6 +14,6 @@ const emit = defineEmits(["click"]);
 
 <template>
     <BButton :title="title" role="button" variant="link" size="sm" class="ml-0" @click="emit('click')">
-        <FontAwesomeIcon icon="file-excel" />
+        <FontAwesomeIcon :icon="faFileExcel" />
     </BButton>
 </template>
diff --git a/client/src/components/Common/DelayedInput.vue b/client/src/components/Common/DelayedInput.vue
index a8a08f6f460..7559adbc5e9 100644
--- a/client/src/components/Common/DelayedInput.vue
+++ b/client/src/components/Common/DelayedInput.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faAngleDoubleDown, faAngleDoubleUp, faSpinner, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { watchImmediate } from "@vueuse/core";
@@ -11,8 +10,6 @@ import localize from "@/utils/localization";
 import GFormInput from "../BaseComponents/Form/GFormInput.vue";
 import GButton from "../BaseComponents/GButton.vue";
 
-library.add(faAngleDoubleDown, faAngleDoubleUp, faSpinner, faTimes);
-
 interface Props {
     value?: string;
     delay?: number;
diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 2d98520ed2c..b8d6da68017 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faAngleDoubleUp, faQuestion, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BModal, BPopover } from "bootstrap-vue";
@@ -18,8 +17,6 @@ import FilterMenuMultiTags from "@/components/Common/FilterMenuMultiTags.vue";
 import FilterMenuObjectStore from "@/components/Common/FilterMenuObjectStore.vue";
 import FilterMenuRanged from "@/components/Common/FilterMenuRanged.vue";
 
-library.add(faAngleDoubleUp, faQuestion, faSearch);
-
 interface BackendFilterError {
     err_msg: string;
     err_code: number;
diff --git a/client/src/components/Common/FilterMenuDropdown.vue b/client/src/components/Common/FilterMenuDropdown.vue
index 657b5f47f62..88d4e9180f5 100644
--- a/client/src/components/Common/FilterMenuDropdown.vue
+++ b/client/src/components/Common/FilterMenuDropdown.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BDropdown, BDropdownItem, BInputGroup, BInputGroupAppend, BModal } from "bootstrap-vue";
@@ -12,8 +11,6 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import QuotaUsageBar from "@/components/User/DiskUsage/Quota/QuotaUsageBar.vue";
 
-library.add(faQuestion);
-
 type FilterValue = QuotaUsage | string | boolean | undefined;
 
 type DatalistItem = { value: string; text: string };
diff --git a/client/src/components/Common/FilterMenuInput.vue b/client/src/components/Common/FilterMenuInput.vue
index e8fc7ebd2f5..4ae55a51d71 100644
--- a/client/src/components/Common/FilterMenuInput.vue
+++ b/client/src/components/Common/FilterMenuInput.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
@@ -16,8 +15,6 @@ import { computed, ref, watch } from "vue";
 
 import type { ValidFilter } from "@/utils/filtering";
 
-library.add(faQuestion);
-
 type FilterType = string | boolean | undefined;
 
 interface Props {
diff --git a/client/src/components/Common/FilterObjectStoreLink.vue b/client/src/components/Common/FilterObjectStoreLink.vue
index 444aa67ea9f..0c04317151c 100644
--- a/client/src/components/Common/FilterObjectStoreLink.vue
+++ b/client/src/components/Common/FilterObjectStoreLink.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, ref } from "vue";
@@ -10,8 +9,6 @@ import { useObjectStoreStore } from "@/stores/objectStoreStore";
 import ObjectStoreSelect from "./ObjectStoreSelect.vue";
 import SelectModal from "@/components/Dataset/DatasetStorage/SelectModal.vue";
 
-library.add(faTimes);
-
 interface FilterObjectStoreLinkProps {
     value?: string;
     objectStores: ConcreteObjectStoreModel[];
@@ -52,7 +49,7 @@ const selectionText = computed(() => {
         </SelectModal>
         <b-link href="#" @click="showModal = true">{{ selectionText }}</b-link>
         <span v-if="value" v-b-tooltip.hover title="Remove Filter">
-            <FontAwesomeIcon icon="times" @click="onSelect(undefined)" />
+            <FontAwesomeIcon :icon="faTimes" @click="onSelect(undefined)" />
         </span>
     </span>
 </template>
diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index 5c5f6606a76..1514d2038ff 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faAngleDown, faAngleUp, faBars, faGripVertical } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox } from "bootstrap-vue";
@@ -10,8 +9,6 @@ import { type ListViewMode, useUserStore } from "@/stores/userStore";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 
-library.add(faAngleDown, faAngleUp, faBars, faGripVertical);
-
 type SortBy = "create_time" | "update_time" | "name";
 
 interface Props {
diff --git a/client/src/components/ConfigTemplates/VaultSecret.vue b/client/src/components/ConfigTemplates/VaultSecret.vue
index 4c6140ddbbb..a49e25c39e8 100644
--- a/client/src/components/ConfigTemplates/VaultSecret.vue
+++ b/client/src/components/ConfigTemplates/VaultSecret.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
@@ -7,8 +6,6 @@ import { computed, ref } from "vue";
 
 import { markup } from "@/components/ObjectStore/configurationMarkdown";
 
-library.add(faPen);
-
 interface Props {
     name: string;
     label: string;
diff --git a/client/src/components/CopyToClipboard.vue b/client/src/components/CopyToClipboard.vue
index 53602257a9d..61b71f6b279 100644
--- a/client/src/components/CopyToClipboard.vue
+++ b/client/src/components/CopyToClipboard.vue
@@ -1,15 +1,12 @@
 <template>
-    <FontAwesomeIcon class="cursor-pointer" :title="title" :icon="['far', 'copy']" @click="copy(text, message)" />
+    <FontAwesomeIcon class="cursor-pointer" :title="title" :icon="faCopy" @click="copy(text, message)" />
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCopy } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { copy } from "utils/clipboard";
 
-library.add(faCopy);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -29,6 +26,11 @@ export default {
             required: false,
         },
     },
+    data() {
+        return {
+            faCopy,
+        };
+    },
     methods: {
         copy(text, message) {
             copy(text, message);
diff --git a/client/src/components/Dataset/DatasetName.vue b/client/src/components/Dataset/DatasetName.vue
index ad5a708b000..6fcfbbca395 100644
--- a/client/src/components/Dataset/DatasetName.vue
+++ b/client/src/components/Dataset/DatasetName.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCopy, faEye, faPause, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCopy, faPause, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { HDASummary } from "@/api";
 
-library.add(faCaretDown, faCopy, faEye, faTimesCircle, faPause);
-
 interface Props {
     item: HDASummary;
 }
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.vue b/client/src/components/DatasetInformation/DatasetAttributes.vue
index 21c51bf7abc..bdcfd69c7b2 100644
--- a/client/src/components/DatasetInformation/DatasetAttributes.vue
+++ b/client/src/components/DatasetInformation/DatasetAttributes.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { AxiosError } from "axios";
@@ -16,8 +15,6 @@ import GButton from "@/components/BaseComponents/GButton.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faBars, faCog, faDatabase, faExchangeAlt, faRedo, faSave, faUser);
-
 interface Props {
     datasetId: string;
 }
diff --git a/client/src/components/DatasetInformation/DatasetSource.vue b/client/src/components/DatasetInformation/DatasetSource.vue
index a1e8f9d8445..01942ca1b46 100644
--- a/client/src/components/DatasetInformation/DatasetSource.vue
+++ b/client/src/components/DatasetInformation/DatasetSource.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCopy, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
@@ -10,8 +9,6 @@ import localize from "@/utils/localization";
 
 import DatasetSourceTransform from "@/components/DatasetInformation/DatasetSourceTransform.vue";
 
-library.add(faCopy, faExternalLinkAlt);
-
 interface Props {
     source: DatasetSource;
 }
diff --git a/client/src/components/DragGhost.vue b/client/src/components/DragGhost.vue
index bc15f7c46af..fb4fd9173de 100644
--- a/client/src/components/DragGhost.vue
+++ b/client/src/components/DragGhost.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
@@ -8,8 +7,6 @@ import { computed } from "vue";
 
 import TextShort from "@/components/Common/TextShort.vue";
 
-library.add(faPaperPlane);
-
 const eventStore = useEventStore();
 const { multipleDragData } = storeToRefs(eventStore);
 
diff --git a/client/src/components/ExternalLink.vue b/client/src/components/ExternalLink.vue
index 7550c232916..d21cf8949df 100644
--- a/client/src/components/ExternalLink.vue
+++ b/client/src/components/ExternalLink.vue
@@ -1,10 +1,7 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-library.add(faExternalLinkAlt);
-
 const props = defineProps({
     href: {
         type: String,
@@ -16,6 +13,6 @@ const props = defineProps({
 <template>
     <a target="_blank" :href="props.href">
         <slot></slot>
-        <FontAwesomeIcon icon="external-link-alt" />
+        <FontAwesomeIcon :icon="faExternalLinkAlt" />
     </a>
 </template>
diff --git a/client/src/components/Form/Elements/FormDirectory.vue b/client/src/components/Form/Elements/FormDirectory.vue
index a98cd3301a9..04c077bb61f 100644
--- a/client/src/components/Form/Elements/FormDirectory.vue
+++ b/client/src/components/Form/Elements/FormDirectory.vue
@@ -1,7 +1,9 @@
 <template>
     <div>
         <div v-if="!url">
-            <GButton id="select-btn" @click="reset"> <FontAwesomeIcon icon="folder-open" /> {{ selectText }} </GButton>
+            <GButton id="select-btn" @click="reset">
+                <FontAwesomeIcon :icon="faFolderOpen" /> {{ selectText }}
+            </GButton>
             <FilesDialog
                 :key="modalKey"
                 mode="directory"
@@ -12,7 +14,7 @@
         <b-breadcrumb v-if="url" class="mb-0">
             <b-breadcrumb-item title="Select another folder" class="align-items-center" @click="reset">
                 <GButton class="pathname" color="blue">
-                    <FontAwesomeIcon icon="folder-open" /> {{ url.protocol }}
+                    <FontAwesomeIcon :icon="faFolderOpen" /> {{ url.protocol }}
                 </GButton>
             </b-breadcrumb-item>
             <b-breadcrumb-item
@@ -45,8 +47,7 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faFolder, faFolderOpen } from "@fortawesome/free-solid-svg-icons";
+import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { FilesDialog } from "components/FilesDialog";
 import { Toast } from "composables/toast";
@@ -56,8 +57,6 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 
-library.add(faFolder, faFolderOpen);
-
 const getDefaultValues = () => ({
     isModalShown: false,
     url: "",
@@ -78,7 +77,12 @@ export default {
         },
     },
     data() {
-        return { ...getDefaultValues(), modalKey: 0, selectText: _l("Select") };
+        return {
+            ...getDefaultValues(),
+            modalKey: 0,
+            selectText: _l("Select"),
+            faFolderOpen,
+        };
     },
     computed: {
         isValidName() {
diff --git a/client/src/components/Form/Elements/FormRulesEdit.vue b/client/src/components/Form/Elements/FormRulesEdit.vue
index 0784f6d99ae..6f39ce32aa9 100644
--- a/client/src/components/Form/Elements/FormRulesEdit.vue
+++ b/client/src/components/Form/Elements/FormRulesEdit.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert } from "bootstrap-vue";
@@ -13,8 +12,6 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 
-library.add(faEdit);
-
 const props = defineProps({
     value: {
         type: Object,
@@ -73,7 +70,7 @@ function onCancel() {
     <div class="form-rules-edit">
         <RulesDisplay :input-rules="displayRules" />
         <GButton title="Edit Rules" @click="onEdit">
-            <FontAwesomeIcon icon="fa-edit" />
+            <FontAwesomeIcon :icon="faEdit" />
             <span>Edit</span>
         </GButton>
         <LoadingSpan v-if="loading" message="Loading collection details"> </LoadingSpan>
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 309c973cd4f..c96e2acd726 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faSquare } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, type ComputedRef, onMounted, type PropType, ref, watch } from "vue";
@@ -13,8 +12,6 @@ import { type DataOption, isDataOption, itemUniqueKey } from "./FormData/types";
 
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
-library.add(faCheckSquare, faSquare);
-
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
 type SelectValue = Record<string, unknown> | string | number | null;
diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index 546af4cfc59..370c4ad1393 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BDropdown, BDropdownItemButton } from "bootstrap-vue";
@@ -13,8 +12,6 @@ import FormRadio from "./FormRadio.vue";
 import FormSelect from "./FormSelect.vue";
 import FormSelectMany from "./FormSelectMany/FormSelectMany.vue";
 
-library.add(faCaretDown);
-
 export interface SelectOption {
     label: string;
     value: any;
@@ -140,7 +137,7 @@ defineExpose({
 
             <BDropdown toggle-class="inline-icon-button d-block px-1" variant="link" no-caret>
                 <template v-slot:button-content>
-                    <FontAwesomeIcon icon="fa-caret-down"></FontAwesomeIcon>
+                    <FontAwesomeIcon :icon="faCaretDown"></FontAwesomeIcon>
                     <span class="sr-only">select element preferences</span>
                 </template>
                 <BDropdownItemButton
diff --git a/client/src/components/Form/FormCard.vue b/client/src/components/Form/FormCard.vue
index d319e31fe5c..db1f957c0f6 100644
--- a/client/src/components/Form/FormCard.vue
+++ b/client/src/components/Form/FormCard.vue
@@ -10,8 +10,8 @@
                     variant="link"
                     size="sm"
                     class="float-right">
-                    <FontAwesomeIcon v-if="expanded" icon="chevron-up" class="fa-fw" />
-                    <FontAwesomeIcon v-else icon="chevron-down" class="fa-fw" />
+                    <FontAwesomeIcon v-if="expanded" :icon="faChevronUp" class="fa-fw" />
+                    <FontAwesomeIcon v-else :icon="faChevronDown" class="fa-fw" />
                 </span>
             </div>
             <span class="portlet-title">
@@ -28,14 +28,10 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { IconDefinition } from "font-awesome-6";
 
-library.add(faChevronUp);
-library.add(faChevronDown);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -63,7 +59,10 @@ export default {
         },
     },
     data() {
-        return {};
+        return {
+            faChevronUp,
+            faChevronDown,
+        };
     },
     computed: {
         portletHeaderClasses() {
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 7cd8127004c..1b7ef627fdd 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretSquareDown, faCaretSquareUp } from "@fortawesome/free-regular-svg-icons";
-import { faArrowsAltH, faExclamation, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { sanitize } from "dompurify";
 import type { ComputedRef } from "vue";
@@ -86,8 +83,6 @@ const emit = defineEmits<{
     (e: "change", shouldRefresh: boolean): void;
 }>();
 
-library.add(faExclamation, faTimes, faArrowsAltH, faCaretSquareDown, faCaretSquareUp);
-
 /** TODO: remove attrs computed.
  useAttrs is *not* reactive, and does not play nice with type safety.
  It is present for compatibility with the legacy "FormParameter" component,
diff --git a/client/src/components/GalaxyWizard.vue b/client/src/components/GalaxyWizard.vue
index f694015f647..32095f0a0a7 100644
--- a/client/src/components/GalaxyWizard.vue
+++ b/client/src/components/GalaxyWizard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faThumbsDown, faThumbsUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BSkeleton } from "bootstrap-vue";
@@ -12,7 +11,6 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import GButton from "./BaseComponents/GButton.vue";
 import LoadingSpan from "./LoadingSpan.vue";
 
-library.add(faThumbsUp, faThumbsDown);
 interface Props {
     context?: string;
     jobId: string;
diff --git a/client/src/components/Grid/GridElements/GridExpand.vue b/client/src/components/Grid/GridElements/GridExpand.vue
index f6fceae2dc1..990e1317fd1 100644
--- a/client/src/components/Grid/GridElements/GridExpand.vue
+++ b/client/src/components/Grid/GridElements/GridExpand.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink } from "bootstrap-vue";
 
-library.add(faChevronDown, faChevronUp);
-
 interface Props {
     detailsShowing?: boolean;
 }
diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
index 3c8c3e3c39f..631e9695c96 100644
--- a/client/src/components/Grid/GridList.vue
+++ b/client/src/components/Grid/GridList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown, faCaretUp, faShieldAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDebounceFn, useEventBus } from "@vueuse/core";
@@ -27,8 +26,6 @@ import UtcDate from "@/components/UtcDate.vue";
 const eventBus = useEventBus<string>("grid-router-push");
 const router = useRouter();
 
-library.add(faCaretDown, faCaretUp, faShieldAlt);
-
 interface Props {
     // provide a grid configuration
     gridConfig: GridConfig;
@@ -414,9 +411,9 @@ watch(operationMessage, () => {
                                 <span v-if="sortBy === fieldEntry.key">
                                     <FontAwesomeIcon
                                         v-if="sortDesc"
-                                        icon="caret-down"
+                                        :icon="faCaretDown"
                                         data-description="grid sort desc" />
-                                    <FontAwesomeIcon v-else icon="caret-up" data-description="grid sort asc" />
+                                    <FontAwesomeIcon v-else :icon="faCaretUp" data-description="grid sort asc" />
                                 </span>
                             </BButton>
                         </span>
@@ -493,7 +490,7 @@ watch(operationMessage, () => {
                                     @tag-click="applyFilter('tag', $event, true)" />
                                 <span v-else v-localize> Not available. </span>
                             </div>
-                            <FontAwesomeIcon v-else icon="fa-shield-alt" />
+                            <FontAwesomeIcon v-else :icon="faShieldAlt" />
                         </td>
                     </tr>
                     <tr v-if="expanded.has(rowData)" data-description="grid expanded row">
diff --git a/client/src/components/Grid/GridPage.vue b/client/src/components/Grid/GridPage.vue
index 505b6b9b496..67aec66d4ed 100644
--- a/client/src/components/Grid/GridPage.vue
+++ b/client/src/components/Grid/GridPage.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { BNav, BNavItem } from "bootstrap-vue";
 
@@ -14,8 +13,6 @@ import GridList from "@/components/Grid/GridList.vue";
 
 const userStore = useUserStore();
 
-library.add(faPlus);
-
 interface Props {
     activeList?: "my" | "published";
     username?: string;
diff --git a/client/src/components/Grid/GridVisualization.vue b/client/src/components/Grid/GridVisualization.vue
index 5f8c32b76ea..9c49b8f8644 100644
--- a/client/src/components/Grid/GridVisualization.vue
+++ b/client/src/components/Grid/GridVisualization.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { BNav, BNavItem } from "bootstrap-vue";
 
 import visualizationsGridConfig from "@/components/Grid/configs/visualizations";
@@ -14,8 +12,6 @@ import GridList from "@/components/Grid/GridList.vue";
 
 const userStore = useUserStore();
 
-library.add(faPlus);
-
 interface Props {
     activeList?: "my" | "shared" | "published";
     username?: string;
diff --git a/client/src/components/History/Archiving/IncludedBadge.vue b/client/src/components/History/Archiving/IncludedBadge.vue
index 563d59b4a28..334f5f1a2bd 100644
--- a/client/src/components/History/Archiving/IncludedBadge.vue
+++ b/client/src/components/History/Archiving/IncludedBadge.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge } from "bootstrap-vue";
 import { computed } from "vue";
 
-library.add(faCheck, faTimes);
-
 interface Props {
     itemName: string;
     included: boolean;
@@ -21,8 +18,8 @@ const variant = computed(() => {
 
 <template>
     <BBadge :variant="variant">
-        <FontAwesomeIcon v-if="props.included" icon="check" />
-        <FontAwesomeIcon v-else icon="times" />
+        <FontAwesomeIcon v-if="props.included" :icon="faCheck" />
+        <FontAwesomeIcon v-else :icon="faTimes" />
         {{ props.itemName }}
     </BBadge>
 </template>
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index c8c17d487b3..76c71412fcc 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faSquare } from "@fortawesome/free-regular-svg-icons";
-import {
-    faArrowCircleDown,
-    faArrowCircleUp,
-    faCheckCircle,
-    faExchangeAlt,
-    faSpinner,
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowCircleDown, faArrowCircleUp, faCheckCircle, faExchangeAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge, BButton, BCollapse } from "bootstrap-vue";
 import { computed, ref } from "vue";
@@ -28,8 +21,6 @@ import ContentOptions from "./ContentOptions.vue";
 import DatasetDetails from "./Dataset/DatasetDetails.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
-library.add(faArrowCircleUp, faArrowCircleDown, faCheckCircle, faExchangeAlt, faSpinner);
-
 const router = useRouter();
 const route = useRoute();
 
diff --git a/client/src/components/History/Content/Dataset/DatasetActions.vue b/client/src/components/History/Content/Dataset/DatasetActions.vue
index 21ad68286b2..cff959cedaa 100644
--- a/client/src/components/History/Content/Dataset/DatasetActions.vue
+++ b/client/src/components/History/Content/Dataset/DatasetActions.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBug, faChartBar, faInfoCircle, faLink, faRedo, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
@@ -15,8 +14,6 @@ import type { ItemUrls } from ".";
 
 import DatasetDownload from "@/components/History/Content/Dataset/DatasetDownload.vue";
 
-library.add(faBug, faChartBar, faInfoCircle, faLink, faRedo, faSitemap);
-
 interface Props {
     item: HDADetailed;
     writable: boolean;
diff --git a/client/src/components/History/Content/Dataset/DatasetDownload.vue b/client/src/components/History/Content/Dataset/DatasetDownload.vue
index fea34b92864..80c0a467a3e 100644
--- a/client/src/components/History/Content/Dataset/DatasetDownload.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDownload.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BDropdown, BDropdownItem } from "bootstrap-vue";
@@ -8,8 +7,6 @@ import { computed } from "vue";
 import type { HDADetailed } from "@/api";
 import { prependPath } from "@/utils/redirect";
 
-library.add(faSave);
-
 interface Props {
     item: HDADetailed;
 }
diff --git a/client/src/components/History/CurrentCollection/CollectionNavigation.vue b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
index e1ef5187377..18ae366e53d 100644
--- a/client/src/components/History/CurrentCollection/CollectionNavigation.vue
+++ b/client/src/components/History/CurrentCollection/CollectionNavigation.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faAngleDoubleLeft, faAngleLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
@@ -7,8 +6,6 @@ import { computed } from "vue";
 
 import type { CollectionEntry } from "@/api";
 
-library.add(faAngleDoubleLeft, faAngleLeft);
-
 interface Props {
     historyName: string;
     selectedCollections: CollectionEntry[];
diff --git a/client/src/components/History/CurrentHistory/HistoryCounter.vue b/client/src/components/History/CurrentHistory/HistoryCounter.vue
index 3b772749783..927e5e94a72 100644
--- a/client/src/components/History/CurrentHistory/HistoryCounter.vue
+++ b/client/src/components/History/CurrentHistory/HistoryCounter.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faDatabase, faEyeSlash, faHdd, faMapMarker, faSync, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faDatabase, faEyeSlash, faMapMarker, faSync, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { watchImmediate } from "@vueuse/core";
 import { BButton, BButtonGroup } from "bootstrap-vue";
@@ -17,8 +16,6 @@ import { useUserStore } from "@/stores/userStore";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 
-library.add(faDatabase, faEyeSlash, faHdd, faMapMarker, faSync, faTrash);
-
 const props = withDefaults(
     defineProps<{
         history: HistorySummaryExtended;
diff --git a/client/src/components/History/CurrentHistory/HistoryEmpty.vue b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
index 96dd2f2aeff..6959c05603e 100644
--- a/client/src/components/History/CurrentHistory/HistoryEmpty.vue
+++ b/client/src/components/History/CurrentHistory/HistoryEmpty.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
@@ -8,8 +7,6 @@ import { BAlert } from "bootstrap-vue";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import localize from "@/utils/localization";
 
-library.add(faInfoCircle);
-
 const { emit } = useEventBus<string>("open-tool-section");
 
 const props = withDefaults(
diff --git a/client/src/components/History/CurrentHistory/HistoryMessages.vue b/client/src/components/History/CurrentHistory/HistoryMessages.vue
index 6b2b6feedb0..7c3990ffc68 100644
--- a/client/src/components/History/CurrentHistory/HistoryMessages.vue
+++ b/client/src/components/History/CurrentHistory/HistoryMessages.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faArchive, faBurn, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert } from "bootstrap-vue";
@@ -8,8 +7,6 @@ import { computed, ref } from "vue";
 import { type AnyUser, type HistorySummary, userOwnsHistory } from "@/api";
 import localize from "@/utils/localization";
 
-library.add(faArchive, faBurn, faTrash);
-
 interface Props {
     history: HistorySummary;
     currentUser: AnyUser;
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue
index 7af56d591c6..742c1a509fa 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BDropdown, BDropdownItem, BDropdownText, BModal } from "bootstrap-vue";
@@ -14,8 +13,6 @@ import {
 import { iframeRedirect } from "@/components/plugins/legacyNavigation";
 import { useHistoryContentStats } from "@/composables/historyContentStats";
 
-library.add(faCog);
-
 interface Props {
     history: HistorySummaryExtended;
 }
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue
index 9796749ccdc..9e03d4ad39f 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/HistoryOperations.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faCompress } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -7,8 +6,6 @@ import type { HistorySummaryExtended } from "@/api";
 
 import DefaultOperations from "@/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue";
 
-library.add(faCheckSquare, faCompress);
-
 interface Props {
     history: HistorySummaryExtended;
     hasMatches: boolean;
diff --git a/client/src/components/History/HistoryIndicators.vue b/client/src/components/History/HistoryIndicators.vue
index d58df849068..5c697b003a2 100644
--- a/client/src/components/History/HistoryIndicators.vue
+++ b/client/src/components/History/HistoryIndicators.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faArchive, faBurn, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge } from "bootstrap-vue";
@@ -11,8 +10,6 @@ import localize from "@/utils/localization";
 
 import UtcDate from "../UtcDate.vue";
 
-library.add(faArchive, faBurn, faTrash);
-
 const userStore = useUserStore();
 const { currentUser } = storeToRefs(userStore);
 
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 917000f04ac..a1ef0c9ad6c 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPen, faSave, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BFormInput, BFormTextarea } from "bootstrap-vue";
@@ -15,8 +14,6 @@ import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
-library.add(faPen, faSave, faUndo);
-
 interface Props {
     name?: string;
     tags?: string[];
diff --git a/client/src/components/History/Multiple/MultipleView.vue b/client/src/components/History/Multiple/MultipleView.vue
index c990077a84e..dc8d0dad697 100644
--- a/client/src/components/History/Multiple/MultipleView.vue
+++ b/client/src/components/History/Multiple/MultipleView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCheckSquare, faClock, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faCheckSquare, faClock, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
@@ -26,8 +25,6 @@ const showAdvanced = ref(false);
 const showSelectModal = ref(false);
 const initialLoaded = ref(false);
 
-library.add(faCheckSquare, faClock, faTimes, faUndo);
-
 const { currentUser } = storeToRefs(useUserStore());
 const { histories, currentHistory, historiesLoading } = storeToRefs(useHistoryStore());
 
diff --git a/client/src/components/History/Multiple/MultipleViewItem.vue b/client/src/components/History/Multiple/MultipleViewItem.vue
index ab72791656c..09f183069a1 100644
--- a/client/src/components/History/Multiple/MultipleViewItem.vue
+++ b/client/src/components/History/Multiple/MultipleViewItem.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
@@ -14,8 +13,6 @@ import HistoryNavigation from "@/components/History/CurrentHistory/HistoryNaviga
 import HistoryPanel from "@/components/History/CurrentHistory/HistoryPanel.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faTimes);
-
 interface Props {
     source: {
         id: string;
diff --git a/client/src/components/History/Multiple/MultipleViewList.vue b/client/src/components/History/Multiple/MultipleViewList.vue
index 51f0dd2d57d..7d132937445 100644
--- a/client/src/components/History/Multiple/MultipleViewList.vue
+++ b/client/src/components/History/Multiple/MultipleViewList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, type Ref, ref } from "vue";
@@ -18,8 +17,6 @@ import { useHistoryDragDrop } from "../../../composables/historyDragDrop";
 import HistoryDropZone from "../CurrentHistory/HistoryDropZone.vue";
 import MultipleViewItem from "./MultipleViewItem.vue";
 
-library.add(faCheckSquare, faPlus);
-
 const historyStore = useHistoryStore();
 
 const props = withDefaults(
diff --git a/client/src/components/History/SwitchToHistoryLink.vue b/client/src/components/History/SwitchToHistoryLink.vue
index 3b0f732b60b..223848e4226 100644
--- a/client/src/components/History/SwitchToHistoryLink.vue
+++ b/client/src/components/History/SwitchToHistoryLink.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faArchive, faBurn } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
@@ -15,8 +14,6 @@ import { errorMessageAsString } from "@/utils/simple-error";
 import GLink from "@/components/BaseComponents/GLink.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faArchive, faBurn);
-
 const router = useRouter();
 const historyStore = useHistoryStore();
 const userStore = useUserStore();
diff --git a/client/src/components/HistoryExport/ExportLink.vue b/client/src/components/HistoryExport/ExportLink.vue
index e4eab681240..df47cbb4582 100644
--- a/client/src/components/HistoryExport/ExportLink.vue
+++ b/client/src/components/HistoryExport/ExportLink.vue
@@ -4,7 +4,7 @@
             ><a class="generated-export-link" :href="link">{{ link }}</a></b
         >
         <span v-b-tooltip.hover title="Copy export URL to your clipboard">
-            <FontAwesomeIcon class="copy-export-link" icon="link" style="cursor: pointer" @click="copyUrl" />
+            <FontAwesomeIcon class="copy-export-link" :icon="faLink" style="cursor: pointer" @click="copyUrl" />
         </span>
         <i
             title="Information about when the history export was generated is included in the job details. Additionally, if there are issues with export, the job details may help figure out the underlying problem or communicate issues to your Galaxy administrator.">
@@ -17,7 +17,6 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faLink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BModal } from "bootstrap-vue";
@@ -25,8 +24,6 @@ import { copy } from "utils/clipboard";
 
 import JobInformation from "components/JobInformation/JobInformation.vue";
 
-library.add(faLink);
-
 export default {
     components: { BModal, JobInformation, FontAwesomeIcon },
     props: {
@@ -38,6 +35,7 @@ export default {
     data() {
         return {
             details: false,
+            faLink,
         };
     },
     computed: {
diff --git a/client/src/components/HistoryImport.vue b/client/src/components/HistoryImport.vue
index 344552cb9b8..e93d6e9b532 100644
--- a/client/src/components/HistoryImport.vue
+++ b/client/src/components/HistoryImport.vue
@@ -37,15 +37,15 @@
                         stacked>
                         <b-form-radio value="externalUrl">
                             Export URL from another Galaxy instance
-                            <FontAwesomeIcon icon="external-link-alt" />
+                            <FontAwesomeIcon :icon="faExternalLinkAlt" />
                         </b-form-radio>
                         <b-form-radio value="upload">
                             Upload local file from your computer
-                            <FontAwesomeIcon icon="upload" />
+                            <FontAwesomeIcon :icon="faUpload" />
                         </b-form-radio>
                         <b-form-radio v-if="hasFileSources" value="remoteFilesUri">
                             Select a repository (e.g. Galaxy's FTP)
-                            <FontAwesomeIcon icon="folder-open" />
+                            <FontAwesomeIcon :icon="faFolderOpen" />
                         </b-form-radio>
                     </b-form-radio-group>
                 </b-form-group>
@@ -90,7 +90,6 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt, faFolderOpen, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { refDebounced } from "@vueuse/core";
@@ -112,9 +111,6 @@ import ExternalLink from "./ExternalLink";
 import GButton from "./BaseComponents/GButton.vue";
 import FilesInput from "components/FilesDialog/FilesInput.vue";
 
-library.add(faFolderOpen);
-library.add(faUpload);
-library.add(faExternalLinkAlt);
 Vue.use(BootstrapVue);
 
 export default {
@@ -158,6 +154,9 @@ export default {
             jobError: null,
             jobId: null,
             hasFileSources: false,
+            faExternalLinkAlt,
+            faFolderOpen,
+            faUpload,
         };
     },
     computed: {
diff --git a/client/src/components/Indices/IndexFilter.vue b/client/src/components/Indices/IndexFilter.vue
index 94ce4cc5b64..b6c2e01518a 100644
--- a/client/src/components/Indices/IndexFilter.vue
+++ b/client/src/components/Indices/IndexFilter.vue
@@ -21,7 +21,7 @@
                     title="Advanced Filtering Help"
                     :size="size"
                     @click="onHelp">
-                    <FontAwesomeIcon icon="question" />
+                    <FontAwesomeIcon :icon="faQuestion" />
                 </BButton>
                 <BButton
                     v-b-tooltip.hover
@@ -29,7 +29,7 @@
                     title="Clear Filters (esc)"
                     :size="size"
                     @click="onReset">
-                    <FontAwesomeIcon icon="times" />
+                    <FontAwesomeIcon :icon="faTimes" />
                 </BButton>
             </BInputGroupAppend>
         </BInputGroup>
@@ -40,14 +40,11 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BInputGroup, BInputGroupAppend, BModal } from "bootstrap-vue";
 import DebouncedInput from "components/DebouncedInput";
 
-library.add(faTimes, faQuestion);
-
 /**
  * Component for the search/filter button on the top of Galaxy object index grids.
  */
@@ -90,6 +87,8 @@ export default {
         return {
             showHelp: false,
             localFilter: this.value,
+            faQuestion,
+            faTimes,
         };
     },
     watch: {
diff --git a/client/src/components/Indices/SharingIndicators.vue b/client/src/components/Indices/SharingIndicators.vue
index 34bd7e9e3b5..ca68f89bdfd 100644
--- a/client/src/components/Indices/SharingIndicators.vue
+++ b/client/src/components/Indices/SharingIndicators.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faGlobe, faLink, faShareAlt, faUsers } from "@fortawesome/free-solid-svg-icons";
+import { faGlobe, faLink, faShareAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 
-library.add(faGlobe, faShareAlt, faLink, faUsers);
-
 interface SharingIndicatorsProps {
     object: {
         deleted?: boolean;
@@ -30,7 +27,7 @@ const props = defineProps<SharingIndicatorsProps>();
             variant="link"
             title="Find all published items"
             @click.prevent="$emit('filter', 'published')">
-            <FontAwesomeIcon icon="globe" />
+            <FontAwesomeIcon :icon="faGlobe" />
         </BButton>
         <BButton
             v-if="props.object.importable"
@@ -40,7 +37,7 @@ const props = defineProps<SharingIndicatorsProps>();
             variant="link"
             title="Find all importable items"
             @click.prevent="$emit('filter', 'importable')">
-            <FontAwesomeIcon icon="link" />
+            <FontAwesomeIcon :icon="faLink" />
         </BButton>
         <BButton
             v-if="props.object.shared"
@@ -50,7 +47,7 @@ const props = defineProps<SharingIndicatorsProps>();
             variant="link"
             title="Find all items shared with me"
             @click.prevent="$emit('filter', 'shared_with_me')">
-            <FontAwesomeIcon icon="share-alt" />
+            <FontAwesomeIcon :icon="faShareAlt" />
         </BButton>
     </span>
 </template>
diff --git a/client/src/components/InheritanceChain/InheritanceChain.vue b/client/src/components/InheritanceChain/InheritanceChain.vue
index 8120f887bbd..d83ddcf014b 100644
--- a/client/src/components/InheritanceChain/InheritanceChain.vue
+++ b/client/src/components/InheritanceChain/InheritanceChain.vue
@@ -4,7 +4,7 @@
         <div class="current-dataset chain-box">{{ datasetName }}</div>
         <div v-if="inherit_chain && inherit_chain.length > 0">
             <div v-for="({ name, dep }, i) in inherit_chain" :key="i">
-                <FontAwesomeIcon class="inheritance-arrow" size="3x" :icon="['fas', 'long-arrow-alt-up']" />
+                <FontAwesomeIcon class="inheritance-arrow" size="3x" :icon="faLongArrowAltUp" />
                 <div class="chain-box">{{ name }} in {{ dep }}</div>
             </div>
         </div>
@@ -12,7 +12,6 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faLongArrowAltUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -20,8 +19,6 @@ import { Services } from "./services";
 
 import Heading from "../Common/Heading.vue";
 
-library.add(faLongArrowAltUp);
-
 export default {
     components: { FontAwesomeIcon, Heading },
     props: {
@@ -37,6 +34,7 @@ export default {
     data() {
         return {
             inherit_chain: [],
+            faLongArrowAltUp,
         };
     },
     created() {
diff --git a/client/src/components/JobInformation/CodeRow.vue b/client/src/components/JobInformation/CodeRow.vue
index c016560301c..40025a4855b 100644
--- a/client/src/components/JobInformation/CodeRow.vue
+++ b/client/src/components/JobInformation/CodeRow.vue
@@ -28,12 +28,10 @@
     </tr>
 </template>
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCompressAlt, faExpandAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import HelpText from "components/Help/HelpText";
 
-library.add(faCompressAlt, faExpandAlt);
 export default {
     components: {
         FontAwesomeIcon,
@@ -50,6 +48,8 @@ export default {
             mouseMoved: false,
             expanded: false,
             lastPos: 0,
+            faCompressAlt,
+            faExpandAlt,
         };
     },
     computed: {
@@ -60,7 +60,7 @@ export default {
             return this.expanded ? "code" : "code preview";
         },
         iconClass() {
-            return this.expanded ? ["fas", "compress-alt"] : ["fas", "expand-alt"];
+            return this.expanded ? this.faCompressAlt : this.faExpandAlt;
         },
     },
     updated() {
diff --git a/client/src/components/JobInformation/JobError.vue b/client/src/components/JobInformation/JobError.vue
index 12886d4b051..3789bdaf438 100644
--- a/client/src/components/JobInformation/JobError.vue
+++ b/client/src/components/JobInformation/JobError.vue
@@ -2,7 +2,7 @@
     <b-card border-variant="danger" :header="header">
         <b-card-text>
             <div @click="showInfo = true">
-                <a href="#">See full job details <FontAwesomeIcon icon="info-circle" /></a>
+                <a href="#">See full job details <FontAwesomeIcon :icon="faInfoCircle" /></a>
             </div>
             <div v-if="job.stderr" class="error-wrapper" @click="toggleExpanded">
                 Job Standard Error
@@ -18,7 +18,6 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
@@ -26,7 +25,6 @@ import Vue from "vue";
 
 import JobInformation from "./JobInformation.vue";
 
-library.add(faInfoCircle);
 Vue.use(BootstrapVue);
 
 export default {
@@ -45,6 +43,7 @@ export default {
         return {
             expanded: false,
             showInfo: false,
+            faInfoCircle,
         };
     },
     computed: {
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
index 8d4efc8314c..522a0df0175 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { GetComponentPropTypes } from "types/utilityTypes";
@@ -13,8 +12,6 @@ import BarChart from "./BarChart.vue";
 import CarbonEmissionsCard from "./CarbonEmissionCard.vue";
 import Heading from "@/components/Common/Heading.vue";
 
-library.add(faQuestionCircle);
-
 interface CarbonEmissionsProps {
     estimatedServerInstance: {
         name: string;
@@ -377,7 +374,7 @@ function getEnergyNeededText(energyNeededInKiloWattHours: number) {
                     class="align-self-start mt-2">
                     <span>
                         Learn more about how we calculate your carbon emissions data.
-                        <FontAwesomeIcon icon="fa-question-circle" />
+                        <FontAwesomeIcon :icon="faQuestionCircle" />
                     </span>
                 </router-link>
             </div>
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
index e571b183f96..ad6347b560b 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
@@ -1,32 +1,20 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-    faBolt,
-    faCar,
-    faGasPump,
-    faLightbulb,
-    faMobile,
-    faSmog,
-    faTree,
-    faTruck,
-} from "@fortawesome/free-solid-svg-icons";
+import { faBolt, faCar, faGasPump, faLightbulb, faMobile, faSmog, faTree } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-library.add(faBolt, faCar, faGasPump, faLightbulb, faMobile, faSmog, faTree, faTruck);
-
 const props = defineProps<{
     icon: "bolt" | "car" | "gasPump" | "lightbulb" | "mobilePhone" | "smog" | "tree";
 }>();
 </script>
 
 <template>
-    <FontAwesomeIcon v-if="props.icon === 'car'" class="icon" icon="fa-car" />
-    <FontAwesomeIcon v-else-if="props.icon === 'gasPump'" class="icon" icon="fa-gas-pump" />
-    <FontAwesomeIcon v-else-if="props.icon === 'lightbulb'" class="icon" icon="fa-lightbulb" />
-    <FontAwesomeIcon v-else-if="props.icon === 'bolt'" class="icon" icon="fa-bolt" />
-    <FontAwesomeIcon v-else-if="props.icon === 'mobilePhone'" class="icon" icon="fa-mobile" />
-    <FontAwesomeIcon v-else-if="props.icon === 'smog'" class="icon" icon="fa-smog" />
-    <FontAwesomeIcon v-else-if="props.icon === 'tree'" class="icon" icon="fa-tree" />
+    <FontAwesomeIcon v-if="props.icon === 'car'" class="icon" :icon="faCar" />
+    <FontAwesomeIcon v-else-if="props.icon === 'gasPump'" class="icon" :icon="faGasPump" />
+    <FontAwesomeIcon v-else-if="props.icon === 'lightbulb'" class="icon" :icon="faLightbulb" />
+    <FontAwesomeIcon v-else-if="props.icon === 'bolt'" class="icon" :icon="faBolt" />
+    <FontAwesomeIcon v-else-if="props.icon === 'mobilePhone'" class="icon" :icon="faMobile" />
+    <FontAwesomeIcon v-else-if="props.icon === 'smog'" class="icon" :icon="faSmog" />
+    <FontAwesomeIcon v-else-if="props.icon === 'tree'" class="icon" :icon="faTree" />
 </template>
 
 <style scoped>
diff --git a/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue b/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
index 30a3fc085e7..aef37e59ede 100644
--- a/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
+++ b/client/src/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue
@@ -61,8 +61,6 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import { buildFields } from "components/Libraries/library-utils";
@@ -70,8 +68,6 @@ import UtcDate from "components/UtcDate";
 import { getAppRoot } from "onload/loadConfig";
 import _l from "utils/localization";
 
-library.add(faInfoCircle);
-
 export default {
     components: {
         FontAwesomeIcon,
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
index e7855e48b5a..2f895f20571 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
@@ -128,9 +128,6 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSave } from "@fortawesome/free-regular-svg-icons";
-import { faBook, faDownload, faPencilAlt, faRedo, faTimes, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import CopyToClipboard from "components/CopyToClipboard";
 import { buildFields } from "components/Libraries/library-utils";
@@ -146,8 +143,6 @@ import { mapState } from "pinia";
 
 import { useUserStore } from "@/stores/userStore";
 
-library.add(faUsers, faRedo, faBook, faDownload, faPencilAlt, faTimes, faSave);
-
 export default {
     components: {
         LibraryBreadcrumb,
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 6f6e54c9232..eaf39489f58 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -45,8 +45,6 @@
 </template>
 
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, ref } from "vue";
 
@@ -56,8 +54,6 @@ import CellEditor from "./Editor/CellEditor.vue";
 import TextEditor from "./Editor/TextEditor.vue";
 import MarkdownHelp from "@/components/Markdown/MarkdownHelp.vue";
 
-library.add(faQuestion);
-
 const props = defineProps<{
     markdownText: string;
     mode: "report" | "page";
diff --git a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
index 1ac287a55b7..fd862bbe3dc 100644
--- a/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
+++ b/client/src/components/Notifications/Broadcasts/BroadcastContainer.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-    faChevronLeft,
-    faChevronRight,
-    faExclamationCircle,
-    faExclamationTriangle,
-    faInfoCircle,
-    faTimes,
-} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
@@ -20,8 +11,6 @@ import { match } from "@/utils/utils";
 
 import Heading from "@/components/Common/Heading.vue";
 
-library.add(faInfoCircle, faTimes, faChevronRight, faChevronLeft, faExclamationTriangle, faExclamationCircle);
-
 type BroadcastNotificationCreateRequest = components["schemas"]["BroadcastNotificationCreateRequest"];
 
 type Options =
diff --git a/client/src/components/Notifications/NotificationsBell.vue b/client/src/components/Notifications/NotificationsBell.vue
index 6928736527b..363d40d6744 100644
--- a/client/src/components/Notifications/NotificationsBell.vue
+++ b/client/src/components/Notifications/NotificationsBell.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBell } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BNavItem } from "bootstrap-vue";
@@ -10,8 +9,6 @@ import { useNotificationsStore } from "@/stores/notificationsStore";
 
 import Popper from "components/Popper/Popper.vue";
 
-library.add(faBell);
-
 defineProps({
     tooltipPlacement: {
         type: String,
diff --git a/client/src/components/Notifications/NotificationsList.vue b/client/src/components/Notifications/NotificationsList.vue
index 4eea15dee9c..22fb4054676 100644
--- a/client/src/components/Notifications/NotificationsList.vue
+++ b/client/src/components/Notifications/NotificationsList.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCog, faHourglassHalf, faRetweet } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCog, faRetweet, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BCollapse, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
@@ -14,8 +13,6 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 import NotificationCard from "@/components/Notifications/NotificationCard.vue";
 import NotificationsPreferences from "@/components/User/Notifications/NotificationsPreferences.vue";
 
-library.add(faCog, faHourglassHalf, faRetweet);
-
 const notificationsStore = useNotificationsStore();
 const { notifications, loadingNotifications } = storeToRefs(notificationsStore);
 
@@ -122,12 +119,12 @@ function togglePreferences() {
 
                     <div v-if="haveSelected">
                         <BButton size="sm" variant="outline-primary" @click="updateNotifications({ seen: true })">
-                            <FontAwesomeIcon icon="check" />
+                            <FontAwesomeIcon :icon="faCheck" />
                             Mark as read
                         </BButton>
 
                         <BButton size="sm" variant="outline-primary" @click="updateNotifications({ deleted: true })">
-                            <FontAwesomeIcon icon="trash" />
+                            <FontAwesomeIcon :icon="faTrash" />
                             Delete
                         </BButton>
                     </div>
@@ -143,7 +140,7 @@ function togglePreferences() {
                             :pressed="showUnread"
                             variant="outline-primary"
                             @click="showUnread = !showUnread">
-                            <FontAwesomeIcon icon="check" />
+                            <FontAwesomeIcon :icon="faCheck" />
                             Unread
                         </BButton>
 
@@ -153,7 +150,7 @@ function togglePreferences() {
                             :pressed="showShared"
                             variant="outline-primary"
                             @click="showShared = !showShared">
-                            <FontAwesomeIcon icon="retweet" />
+                            <FontAwesomeIcon :icon="faRetweet" />
                             Shared
                         </BButton>
                     </BButtonGroup>
diff --git a/client/src/components/PageEditor/PageEditorMarkdown.vue b/client/src/components/PageEditor/PageEditorMarkdown.vue
index 42cd65f5140..d62bc68fd61 100644
--- a/client/src/components/PageEditor/PageEditorMarkdown.vue
+++ b/client/src/components/PageEditor/PageEditorMarkdown.vue
@@ -43,8 +43,6 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEye, faSave, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
 import MarkdownEditor from "components/Markdown/MarkdownEditor";
@@ -57,8 +55,6 @@ import ObjectPermissionsModal from "./ObjectPermissionsModal.vue";
 
 Vue.use(BootstrapVue);
 
-library.add(faEye, faSave, faUsers);
-
 export default {
     components: {
         MarkdownEditor,
diff --git a/client/src/components/Panels/Common/ToolPanelLinks.vue b/client/src/components/Panels/Common/ToolPanelLinks.vue
index 23d57442557..440b1e1334a 100644
--- a/client/src/components/Panels/Common/ToolPanelLinks.vue
+++ b/client/src/components/Panels/Common/ToolPanelLinks.vue
@@ -8,12 +8,8 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-library.add(faExternalLinkAlt);
-
 export default {
     components: { FontAwesomeIcon },
     props: {
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 46feebbfa06..29924a041e9 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faFilter } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
@@ -13,8 +12,6 @@ import Tool from "./Tool.vue";
 import ToolPanelLabel from "./ToolPanelLabel.vue";
 import ToolPanelLinks from "./ToolPanelLinks.vue";
 
-library.add(faFilter);
-
 const emit = defineEmits<{
     (e: "onClick", tool: any, evt: Event): void;
     (e: "onFilter", filter: string): void;
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index e1c787790d2..7289430256b 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, ref, watch } from "vue";
 
 import DraggableSeparator from "@/components/Common/DraggableSeparator.vue";
 
-library.add(faChevronLeft, faChevronRight);
-
 const DEFAULT_WIDTH = 300;
 
 interface Props {
diff --git a/client/src/components/Panels/MultiviewPanel.vue b/client/src/components/Panels/MultiviewPanel.vue
index c2feb91913d..3cd122055b4 100644
--- a/client/src/components/Panels/MultiviewPanel.vue
+++ b/client/src/components/Panels/MultiviewPanel.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faColumns, faPlus, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BBadge, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
@@ -22,8 +21,6 @@ import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 const route = useRoute();
 const router = useRouter();
 
-library.add(faColumns, faPlus, faUndo);
-
 const filter = ref("");
 const showAdvanced = ref(false);
 const loading = ref(false);
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 8ddcf4873d5..c83ed97aa45 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -17,8 +17,6 @@
 </template>
 
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { Placement } from "@popperjs/core";
 import type { PropType } from "vue";
@@ -26,8 +24,6 @@ import { ref } from "vue";
 
 import { type Trigger, usePopper } from "./usePopper";
 
-library.add(faTimesCircle);
-
 const props = defineProps({
     arrow: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
diff --git a/client/src/components/SchemaOrg/CreatorEditor.vue b/client/src/components/SchemaOrg/CreatorEditor.vue
index 7a5c6882fc9..81ccc108466 100644
--- a/client/src/components/SchemaOrg/CreatorEditor.vue
+++ b/client/src/components/SchemaOrg/CreatorEditor.vue
@@ -17,7 +17,7 @@
                             size="sm"
                             title="Edit Creator"
                             @click="onEdit(index)">
-                            <FontAwesomeIcon icon="edit" />
+                            <FontAwesomeIcon :icon="faEdit" />
                         </BButton>
                         <BButton
                             v-b-tooltip.hover
@@ -26,7 +26,7 @@
                             size="sm"
                             title="Remove Creator"
                             @click="onRemove(index)">
-                            <FontAwesomeIcon icon="times" />
+                            <FontAwesomeIcon :icon="faTimes" />
                         </BButton>
                     </template>
                 </CreatorViewer>
@@ -43,7 +43,6 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -51,9 +50,6 @@ import CreatorViewer from "./CreatorViewer";
 import OrganizationForm from "./OrganizationForm";
 import PersonForm from "./PersonForm";
 
-library.add(faTimes);
-library.add(faEdit);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -69,6 +65,8 @@ export default {
     },
     data() {
         return {
+            faEdit,
+            faTimes,
             creatorsCurrent: [],
             editIndex: null,
         };
diff --git a/client/src/components/SchemaOrg/OrganizationForm.vue b/client/src/components/SchemaOrg/OrganizationForm.vue
index 34820441f31..183410b79b0 100644
--- a/client/src/components/SchemaOrg/OrganizationForm.vue
+++ b/client/src/components/SchemaOrg/OrganizationForm.vue
@@ -4,7 +4,7 @@
         <div v-for="attribute in displayedAttributes" :key="attribute.key" role="group" class="form-group">
             <label :for="attribute.key">{{ attribute.label }}</label>
             <span v-b-tooltip.hover title="Hide Attribute"
-                ><FontAwesomeIcon icon="eye-slash" @click="onHide(attribute.key)"
+                ><FontAwesomeIcon :icon="faEyeSlash" @click="onHide(attribute.key)"
             /></span>
             <div v-if="currentErrors[attribute.key]" class="error">{{ currentErrors[attribute.key] }}</div>
             <b-form-input
@@ -25,8 +25,7 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEyeSlash, faLink } from "@fortawesome/free-solid-svg-icons";
+import { faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import ThingFormMixin from "./ThingFormMixin";
@@ -44,8 +43,6 @@ const ATTRIBUTES_INFO = [
 ];
 const ATTRIBUTES = ATTRIBUTES_INFO.map((a) => a.key);
 
-library.add(faEyeSlash, faLink);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -74,6 +71,7 @@ export default {
             show[attribute] = showAttribute;
         }
         return {
+            faEyeSlash,
             attributeInfo: ATTRIBUTES_INFO,
             show: show,
             currentValues: currentValues,
diff --git a/client/src/components/SchemaOrg/OrganizationViewer.vue b/client/src/components/SchemaOrg/OrganizationViewer.vue
index 8d341136883..eec2a9ff419 100644
--- a/client/src/components/SchemaOrg/OrganizationViewer.vue
+++ b/client/src/components/SchemaOrg/OrganizationViewer.vue
@@ -1,6 +1,6 @@
 <template>
     <span itemprop="creator" itemscope itemtype="https://schema.org/Organization">
-        <FontAwesomeIcon ref="button" icon="building" />
+        <FontAwesomeIcon ref="button" :icon="faBuilding" />
         <b-popover
             triggers="click blur"
             :placement="hoverPlacement"
@@ -20,7 +20,7 @@
         </span>
         <a v-if="url" v-b-tooltip.hover title="Organization URL" :href="url" target="_blank">
             <link itemprop="url" :href="url" />
-            <FontAwesomeIcon icon="external-link-alt" />
+            <FontAwesomeIcon :icon="faExternalLinkAlt" />
         </a>
         <meta
             v-for="attribute in explicitMetaAttributes"
@@ -32,14 +32,11 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBuilding, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import ThingViewerMixin from "./ThingViewerMixin";
 
-library.add(faExternalLinkAlt, faBuilding);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -56,6 +53,8 @@ export default {
     },
     data() {
         return {
+            faBuilding,
+            faExternalLinkAlt,
             implicitMicrodataProperties: ["name", "email", "url", "identifier"],
             thing: this.organization,
         };
diff --git a/client/src/components/SchemaOrg/PersonForm.vue b/client/src/components/SchemaOrg/PersonForm.vue
index 3ad4492ba1e..fed5698a243 100644
--- a/client/src/components/SchemaOrg/PersonForm.vue
+++ b/client/src/components/SchemaOrg/PersonForm.vue
@@ -4,7 +4,7 @@
         <div v-for="attribute in displayedAttributes" :key="attribute.key" role="group" class="form-group">
             <label :for="attribute.key">{{ attribute.label }}</label>
             <span v-b-tooltip.hover title="Hide Attribute"
-                ><FontAwesomeIcon icon="eye-slash" @click="onHide(attribute.key)"
+                ><FontAwesomeIcon :icon="faEyeSlash" @click="onHide(attribute.key)"
             /></span>
             <div v-if="currentErrors[attribute.key]" class="error">{{ currentErrors[attribute.key] }}</div>
             <b-form-input
@@ -25,8 +25,7 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEyeSlash, faLink } from "@fortawesome/free-solid-svg-icons";
+import { faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import ThingFormMixin from "./ThingFormMixin";
@@ -49,8 +48,6 @@ const ATTRIBUTES_INFO = [
 ];
 const ATTRIBUTES = ATTRIBUTES_INFO.map((a) => a.key);
 
-library.add(faEyeSlash, faLink);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -79,6 +76,7 @@ export default {
             show[attribute] = showAttribute;
         }
         return {
+            faEyeSlash,
             attributeInfo: ATTRIBUTES_INFO,
             show: show,
             currentValues: currentValues,
diff --git a/client/src/components/SchemaOrg/PersonViewer.vue b/client/src/components/SchemaOrg/PersonViewer.vue
index e7ce9225203..93d984b4bfc 100644
--- a/client/src/components/SchemaOrg/PersonViewer.vue
+++ b/client/src/components/SchemaOrg/PersonViewer.vue
@@ -1,6 +1,6 @@
 <template>
     <span itemprop="creator" itemscope itemtype="https://schema.org/Person">
-        <FontAwesomeIcon ref="button" icon="user" />
+        <FontAwesomeIcon ref="button" :icon="faUser" />
         <b-popover
             triggers="click blur"
             :placement="hoverPlacement"
@@ -27,7 +27,7 @@
         </a>
         <a v-if="url" v-b-tooltip.hover title="URL" :href="url" target="_blank">
             <link itemprop="url" :href="url" />
-            <FontAwesomeIcon icon="external-link-alt" />
+            <FontAwesomeIcon :icon="faExternalLinkAlt" />
         </a>
         <meta
             v-for="attribute in explicitMetaAttributes"
@@ -39,15 +39,12 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faOrcid } from "@fortawesome/free-brands-svg-icons";
 import { faExternalLinkAlt, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import ThingViewerMixin from "./ThingViewerMixin";
 
-library.add(faOrcid, faUser, faExternalLinkAlt);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -64,6 +61,9 @@ export default {
     },
     data() {
         return {
+            faOrcid,
+            faUser,
+            faExternalLinkAlt,
             implicitMicrodataProperties: ["name", "givenName", "email", "familyName", "url", "identifier"],
             thing: this.person,
         };
diff --git a/client/src/components/SelectionDialog/DataDialogSearch.vue b/client/src/components/SelectionDialog/DataDialogSearch.vue
index f0e9abfcdea..272b2579d47 100644
--- a/client/src/components/SelectionDialog/DataDialogSearch.vue
+++ b/client/src/components/SelectionDialog/DataDialogSearch.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
 import { computed } from "vue";
 
-library.add(faTimes);
-
 interface Props {
     value: string;
     title?: string;
@@ -36,7 +33,7 @@ const placeholder = computed(() => `search ${props.title.toLowerCase()}`);
     <BInputGroup class="w-100">
         <BFormInput v-model="filter" :placeholder="placeholder" debounce="500" />
         <BInputGroupAppend>
-            <BButton :disabled="!filter" @click="filter = ''"><FontAwesomeIcon icon="times" /></BButton>
+            <BButton :disabled="!filter" @click="filter = ''"><FontAwesomeIcon :icon="faTimes" /></BButton>
         </BInputGroupAppend>
     </BInputGroup>
 </template>
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index 6443b12ae0e..8f300672604 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type IconDefinition, library } from "@fortawesome/fontawesome-svg-core";
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faMinusSquare, faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faCaretLeft, faCheck, faFolder, faSpinner, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -16,8 +16,6 @@ import Heading from "@/components/Common/Heading.vue";
 import DataDialogSearch from "@/components/SelectionDialog/DataDialogSearch.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
-library.add(faCaretLeft, faCheck, faCheckSquare, faFolder, faMinusSquare, faSpinner, faSquare, faTimes);
-
 const LABEL_FIELD: FieldEntry = { key: "label", sortable: true };
 const SELECT_ICON_FIELD: FieldEntry = { key: "__select_icon__", label: "", sortable: false };
 
diff --git a/client/src/components/Sharing/EditableUrl.vue b/client/src/components/Sharing/EditableUrl.vue
index 8fb285eac86..977c244fdf5 100644
--- a/client/src/components/Sharing/EditableUrl.vue
+++ b/client/src/components/Sharing/EditableUrl.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCheck, faCopy, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed, nextTick, ref } from "vue";
@@ -9,8 +8,6 @@ import { copy } from "@/utils/clipboard";
 
 import SlugInput from "./SlugInput.vue";
 
-library.add(faCopy, faEdit, faCheck);
-
 const props = defineProps<{
     prefix: string;
     slug: string;
@@ -77,10 +74,10 @@ function onCopyOut() {
             title="Edit URL"
             size="md"
             @click="onEdit">
-            <FontAwesomeIcon icon="edit" fixed-width />
+            <FontAwesomeIcon :icon="faEdit" fixed-width />
         </BButton>
         <BButton v-else v-b-tooltip.hover class="inline-icon-button" title="Done" size="md" @click="onSubmit">
-            <FontAwesomeIcon icon="check" fixed-width />
+            <FontAwesomeIcon :icon="faCheck" fixed-width />
         </BButton>
 
         <BButton
diff --git a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
index bb5d3ada63f..c48df46fbb5 100644
--- a/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
+++ b/client/src/components/Sharing/Embeds/WorkflowEmbed.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDebounce } from "@vueuse/core";
@@ -12,8 +11,6 @@ import { copy } from "@/utils/clipboard";
 import ZoomControl from "@/components/Workflow/Editor/ZoomControl.vue";
 import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
 
-library.add(faCopy);
-
 const props = defineProps<{
     id: string;
 }>();
@@ -141,7 +138,7 @@ const clipboardTitle = computed(() => (copied.value ? "Copied!" : "Copy URL"));
                             variant="primary"
                             @click="onCopy"
                             @blur="onCopyOut">
-                            <FontAwesomeIcon icon="copy" />
+                            <FontAwesomeIcon :icon="faCopy" />
                         </BButton>
                     </BInputGroupAppend>
                 </BInputGroup>
diff --git a/client/src/components/Sharing/SharingPage.vue b/client/src/components/Sharing/SharingPage.vue
index 573e0031260..725cc4ad968 100644
--- a/client/src/components/Sharing/SharingPage.vue
+++ b/client/src/components/Sharing/SharingPage.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCaretUp, faCopy, faEdit, faUserPlus, faUserSlash } from "@fortawesome/free-solid-svg-icons";
 import axios from "axios";
 import { BFormCheckbox } from "bootstrap-vue";
 import { computed, nextTick, reactive, ref, watch } from "vue";
@@ -20,8 +18,6 @@ import ErrorMessages from "./ErrorMessages.vue";
 import UserSharing from "./UserSharing.vue";
 import Heading from "@/components/Common/Heading.vue";
 
-library.add(faCopy, faEdit, faUserPlus, faUserSlash, faCaretDown, faCaretUp);
-
 const props = defineProps<{
     id: string;
     pluralName: string;
diff --git a/client/src/components/StsDownloadButton.vue b/client/src/components/StsDownloadButton.vue
index fe49c239b9c..ae94270ee97 100644
--- a/client/src/components/StsDownloadButton.vue
+++ b/client/src/components/StsDownloadButton.vue
@@ -9,8 +9,8 @@
         :size="size"
         @click="onDownload(config)">
         Generate
-        <FontAwesomeIcon v-if="waiting" icon="spinner" spin />
-        <FontAwesomeIcon v-else icon="download" />
+        <FontAwesomeIcon v-if="waiting" :icon="faSpinner" spin />
+        <FontAwesomeIcon v-else :icon="faDownload" />
     </GButton>
 </template>
 
@@ -19,7 +19,6 @@
     A Galaxy Button with logic for interfacing with Galaxy's short term storage
     component (STS).
 */
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faDownload, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
@@ -31,7 +30,6 @@ import { useConfig } from "@/composables/config";
 
 import GButton from "./BaseComponents/GButton.vue";
 
-library.add(faDownload, faSpinner);
 export default {
     components: {
         FontAwesomeIcon,
@@ -75,6 +73,8 @@ export default {
     },
     data() {
         return {
+            faDownload,
+            faSpinner,
             waiting: false,
             delay: 200,
         };
diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
index a325b78b36b..c0b7a16702e 100644
--- a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -6,7 +6,6 @@
  * not a fully featured Multiselect alternative
  */
 
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faChevronUp, faPlus, faTags, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useElementBounding, whenever } from "@vueuse/core";
@@ -17,8 +16,6 @@ import Vue2Teleport from "vue2-teleport";
 import { useUid } from "@/composables/utils/uid";
 import { normalizeTag } from "@/stores/userTagsStore";
 
-library.add(faCheck, faChevronUp, faPlus, faTags, faTimes);
-
 const props = withDefaults(
     defineProps<{
         options: Array<string>;
@@ -309,12 +306,12 @@ whenever(isOpen, async () => {
                 title="close"
                 @click="close(true)"
                 @keydown.tab="onCloseButtonTab">
-                <FontAwesomeIcon icon="fa-chevron-up" />
+                <FontAwesomeIcon :icon="faChevronUp" />
             </button>
         </fieldset>
         <button v-else ref="openButton" class="toggle-button" @click="open">
             {{ props.placeholder }}
-            <FontAwesomeIcon icon="fa-tags" />
+            <FontAwesomeIcon :icon="faTags" />
         </button>
 
         <Vue2Teleport v-if="isOpen" :to="`#${getPopupLayerId()}`">
@@ -357,14 +354,14 @@ whenever(isOpen, async () => {
                         <template v-if="highlightedOption === i">
                             <FontAwesomeIcon
                                 class="headless-multiselect__needs-highlight"
-                                icon="fa-times"
+                                :icon="faTimes"
                                 fixed-width />
                             <span class="sr-only">remove tag</span>
                         </template>
-                        <FontAwesomeIcon v-else icon="fa-check" fixed-width />
+                        <FontAwesomeIcon v-else :icon="faCheck" fixed-width />
                     </span>
                     <span v-else class="headless-multiselect__info">
-                        <FontAwesomeIcon class="headless-multiselect__needs-highlight" icon="fa-plus" fixed-width />
+                        <FontAwesomeIcon class="headless-multiselect__needs-highlight" :icon="faPlus" fixed-width />
                         <span class="sr-only">add tag</span>
                     </span>
                 </button>
diff --git a/client/src/components/TagsMultiselect/Tag.vue b/client/src/components/TagsMultiselect/Tag.vue
index be600c22865..6ce80ca632a 100644
--- a/client/src/components/TagsMultiselect/Tag.vue
+++ b/client/src/components/TagsMultiselect/Tag.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
@@ -20,8 +19,6 @@ const emit = defineEmits<{
     (e: "deleted", tag: string): void;
 }>();
 
-library.add(faTimes);
-
 const color = computed(() => keyedColorScheme(props.option));
 
 function onClick() {
@@ -54,7 +51,7 @@ const searched = computed(() => props.option?.toLowerCase() === props.search?.to
             class="px-1 py-0 tag-delete-button"
             tabindex="-1"
             @click.prevent.stop="onDelete">
-            <FontAwesomeIcon icon="fa-times"></FontAwesomeIcon>
+            <FontAwesomeIcon :icon="faTimes"></FontAwesomeIcon>
         </b-button>
     </div>
 </template>
diff --git a/client/src/components/Tool/ToolFooter.vue b/client/src/components/Tool/ToolFooter.vue
index 2b1c5898eda..1fd4b8326d6 100644
--- a/client/src/components/Tool/ToolFooter.vue
+++ b/client/src/components/Tool/ToolFooter.vue
@@ -9,7 +9,7 @@
                 variant="link"
                 size="sm"
                 @click="copyBibtex">
-                <FontAwesomeIcon icon="copy" />
+                <FontAwesomeIcon :icon="faCopy" />
             </b-button>
             <CitationItem
                 v-for="(citation, index) in citations"
@@ -25,7 +25,7 @@
                 title="Learn more about Galaxy Requirements"
                 href="https://galaxyproject.org/tools/requirements/"
                 target="_blank">
-                See details <FontAwesomeIcon icon="external-link-alt" />
+                See details <FontAwesomeIcon :icon="faExternalLinkAlt" />
             </a>
             <div v-for="(requirement, index) in requirements" :key="index">
                 - {{ requirement.name }}
@@ -43,10 +43,13 @@
                 <template v-if="xref.type == 'bio.tools'">
                     bio.tools: {{ xref.value }} (<a :href="`https://bio.tools/${xref.value}`" target="_blank"
                         >bio.tools
-                        <FontAwesomeIcon v-b-tooltip.hover title="Visit bio.tools page" icon="external-link-alt" /> </a
+                        <FontAwesomeIcon v-b-tooltip.hover title="Visit bio.tools page" :icon="faExternalLinkAlt" /> </a
                     >) (<a :href="`https://openebench.bsc.es/tool/${xref.value}`" target="_blank"
                         >OpenEBench
-                        <FontAwesomeIcon v-b-tooltip.hover title="Visit OpenEBench page" icon="external-link-alt" /> </a
+                        <FontAwesomeIcon
+                            v-b-tooltip.hover
+                            title="Visit OpenEBench page"
+                            :icon="faExternalLinkAlt" /> </a
                     >)
                 </template>
                 <template v-else-if="xref.type == 'bioconductor'">
@@ -66,8 +69,7 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faAngleDoubleDown, faAngleDoubleUp, faCopy, faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { faCopy, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getCitations } from "components/Citation/services";
 import License from "components/License/License";
@@ -76,8 +78,6 @@ import { copy } from "utils/clipboard";
 
 import CitationItem from "components/Citation/CitationItem.vue";
 
-library.add(faQuestion, faCopy, faAngleDoubleDown, faAngleDoubleUp);
-
 export default {
     components: {
         CitationItem,
@@ -109,6 +109,8 @@ export default {
     data() {
         return {
             citations: [],
+            faCopy,
+            faExternalLinkAlt,
         };
     },
     computed: {
diff --git a/client/src/components/Tool/ToolSourceMenuItem.vue b/client/src/components/Tool/ToolSourceMenuItem.vue
index e5578d9e21e..ad7a0db92b2 100644
--- a/client/src/components/Tool/ToolSourceMenuItem.vue
+++ b/client/src/components/Tool/ToolSourceMenuItem.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEye } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useConfig } from "composables/config";
@@ -9,8 +8,6 @@ import { useUserStore } from "@/stores/userStore";
 
 import ToolSource from "./ToolSource.vue";
 
-library.add(faEye);
-
 const { config } = useConfig(true);
 const { currentUser } = storeToRefs(useUserStore());
 
@@ -29,7 +26,7 @@ const props = defineProps({
 <template>
     <div v-if="config.enable_tool_source_display || (currentUser && currentUser.is_admin)">
         <b-dropdown-item v-b-modal.tool-source-viewer>
-            <FontAwesomeIcon icon="far fa-eye" /><span v-localize>View Tool source</span>
+            <FontAwesomeIcon :icon="faEye" /><span v-localize>View Tool source</span>
         </b-dropdown-item>
         <b-modal
             id="tool-source-viewer"
diff --git a/client/src/components/Tool/ToolTutorialRecommendations.vue b/client/src/components/Tool/ToolTutorialRecommendations.vue
index 6c492d1d2eb..d50eadabc33 100644
--- a/client/src/components/Tool/ToolTutorialRecommendations.vue
+++ b/client/src/components/Tool/ToolTutorialRecommendations.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BCollapse } from "bootstrap-vue";
@@ -19,8 +18,6 @@ const props = defineProps<{
     owner?: string;
 }>();
 
-library.add(faCaretDown);
-
 const { trainingAvailable, trainingCategories, tutorialDetails, allTutorialsUrl, versionAvailable } =
     useToolTrainingMaterial(props.id, props.name, props.version, props.owner);
 
@@ -61,13 +58,13 @@ const tutorialText = computed(() => {
                 Tutorials available in {{ trainingCategories.length }}
                 {{ trainingCategories.length > 1 ? "categories" : "category" }}
             </b>
-            <FontAwesomeIcon icon="caret-down" />
+            <FontAwesomeIcon :icon="faCaretDown" />
         </BButton>
         <BCollapse :id="collapseId">
             <div v-for="category in trainingCategories" :key="category">
                 <BButton v-b-toggle="idForCategory(category)" class="ui-link ml-3">
                     {{ category }} ({{ tutorialsInCategory(category).length }})
-                    <FontAwesomeIcon icon="caret-down" />
+                    <FontAwesomeIcon :icon="faCaretDown" />
                 </BButton>
                 <BCollapse :id="idForCategory(category)">
                     <ul class="d-flex flex-column my-1">
diff --git a/client/src/components/ToolEntryPoints/ToolEntryPoints.vue b/client/src/components/ToolEntryPoints/ToolEntryPoints.vue
index e1e6525eac4..2edaf88c189 100644
--- a/client/src/components/ToolEntryPoints/ToolEntryPoints.vue
+++ b/client/src/components/ToolEntryPoints/ToolEntryPoints.vue
@@ -8,7 +8,7 @@
                 There is an InteractiveTool result view available,
                 <a v-b-tooltip title="Open Interactive Tool" :href="entryPointsForJob(jobId)[0].target" target="_blank">
                     Open
-                    <FontAwesomeIcon icon="external-link-alt" />
+                    <FontAwesomeIcon :icon="faExternalLinkAlt" />
                 </a>
             </span>
             <span v-else>
@@ -23,7 +23,7 @@
                     <span v-if="entryPoint.active">
                         <a v-b-tooltip title="Open Interactive Tool" :href="entryPoint.target" target="_blank">
                             (Open
-                            <FontAwesomeIcon icon="external-link-alt" />)
+                            <FontAwesomeIcon :icon="faExternalLinkAlt" />)
                         </a>
                     </span>
                     <span v-else> (waiting to become active...) </span>
@@ -37,15 +37,12 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getAppRoot } from "onload/loadConfig";
 import { mapState } from "pinia";
 import { useEntryPointStore } from "stores/entryPointStore";
 
-library.add(faExternalLinkAlt);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -56,6 +53,11 @@ export default {
             required: true,
         },
     },
+    data() {
+        return {
+            faExternalLinkAlt,
+        };
+    },
     computed: {
         ...mapState(useEntryPointStore, ["entryPointsForJob"]),
         interactiveToolsLink: function () {
diff --git a/client/src/components/ToolsList/ScrollToTopButton.vue b/client/src/components/ToolsList/ScrollToTopButton.vue
index ad41a6a75b9..9e0ae64e2d4 100644
--- a/client/src/components/ToolsList/ScrollToTopButton.vue
+++ b/client/src/components/ToolsList/ScrollToTopButton.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 
-library.add(faChevronUp);
-
 interface Props {
     offset: number;
 }
@@ -22,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
         :title="props.offset > 100 ? 'Scroll To Top' : ''"
         variant="info"
         @click="$emit('click')">
-        <FontAwesomeIcon icon="fa-chevron-up" />
+        <FontAwesomeIcon :icon="faChevronUp" />
     </BButton>
 </template>
 
diff --git a/client/src/components/Upload/CompositeRow.vue b/client/src/components/Upload/CompositeRow.vue
index 4303b7d24b5..1c4e0184f36 100644
--- a/client/src/components/Upload/CompositeRow.vue
+++ b/client/src/components/Upload/CompositeRow.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faEdit, faExclamation, faFolderOpen, faLaptop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BDropdown, BDropdownItem } from "bootstrap-vue";
@@ -11,8 +10,6 @@ import { DEFAULT_FILE_NAME } from "./utils";
 
 import UploadSettings from "./UploadSettings.vue";
 
-library.add(faCheck, faEdit, faExclamation, faFolderOpen, faLaptop);
-
 const props = defineProps({
     fileContent: {
         type: String,
@@ -158,15 +155,15 @@ function onDrop(evt) {
                     text="Select"
                     :variant="fileSize > 0 ? 'secondary' : 'primary'">
                     <BDropdownItem @click="uploadFile.click()">
-                        <FontAwesomeIcon icon="fa-laptop" />
+                        <FontAwesomeIcon :icon="faLaptop" />
                         <span v-localize>Choose local file</span>
                     </BDropdownItem>
                     <BDropdownItem v-if="hasRemoteFiles" @click="inputRemoteFiles">
-                        <FontAwesomeIcon icon="fa-folder-open" />
+                        <FontAwesomeIcon :icon="faFolderOpen" />
                         <span v-localize>Choose from repository</span>
                     </BDropdownItem>
                     <BDropdownItem @click="inputPaste">
-                        <FontAwesomeIcon icon="fa-edit" />
+                        <FontAwesomeIcon :icon="faEdit" />
                         <span v-localize>Paste/Fetch data</span>
                     </BDropdownItem>
                 </BDropdown>
@@ -196,9 +193,9 @@ function onDrop(evt) {
             <div>
                 <FontAwesomeIcon v-if="['running', 'queued'].includes(status)" icon="fa-spinner" spin fixed-width />
                 <FontAwesomeIcon v-else-if="status === 'error'" icon="fa-exclamation-triangle" fixed-width />
-                <FontAwesomeIcon v-else-if="fileSize > 0" icon="fa-check" fixed-width />
-                <FontAwesomeIcon v-else-if="optional" class="text-info" icon="fa-check" fixed-width />
-                <FontAwesomeIcon v-else icon="fa-exclamation" fixed-width />
+                <FontAwesomeIcon v-else-if="fileSize > 0" :icon="faCheck" fixed-width />
+                <FontAwesomeIcon v-else-if="optional" class="text-info" :icon="faCheck" fixed-width />
+                <FontAwesomeIcon v-else :icon="faExclamation" fixed-width />
             </div>
         </div>
         <div v-if="info" v-localize class="upload-text-message font-weight-bold">
diff --git a/client/src/components/Upload/DefaultRow.vue b/client/src/components/Upload/DefaultRow.vue
index a58bdfa30a6..47dc738eaf3 100644
--- a/client/src/components/Upload/DefaultRow.vue
+++ b/client/src/components/Upload/DefaultRow.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit, faFolderOpen, faLaptop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDebounceFn } from "@vueuse/core";
@@ -18,8 +17,6 @@ import UploadExtension from "./UploadExtension.vue";
 import UploadSelect from "./UploadSelect.vue";
 import UploadSettings from "./UploadSettings.vue";
 
-library.add(faEdit, faLaptop, faFolderOpen);
-
 const { isAnonymous } = storeToRefs(useUserStore());
 
 const fileField: Ref<HTMLInputElement | null> = ref(null);
@@ -129,9 +126,9 @@ initializeExplorableArchive();
     <div :id="`upload-row-${index}`" class="upload-row rounded my-1 p-2" :class="`upload-${status}`">
         <div class="d-flex justify-content-around align-items-center">
             <div>
-                <FontAwesomeIcon v-if="fileMode == 'new'" icon="fa-edit" fixed-width />
-                <FontAwesomeIcon v-if="fileMode == 'local'" icon="fa-laptop" fixed-width />
-                <FontAwesomeIcon v-if="fileMode == 'url'" icon="fa-folder-open" fixed-width />
+                <FontAwesomeIcon v-if="fileMode == 'new'" :icon="faEdit" fixed-width />
+                <FontAwesomeIcon v-if="fileMode == 'local'" :icon="faLaptop" fixed-width />
+                <FontAwesomeIcon v-if="fileMode == 'url'" :icon="faFolderOpen" fixed-width />
             </div>
             <b-input
                 ref="fileField"
diff --git a/client/src/components/Upload/RulesInput.vue b/client/src/components/Upload/RulesInput.vue
index 6eb9ac8be2c..41f9dd58725 100644
--- a/client/src/components/Upload/RulesInput.vue
+++ b/client/src/components/Upload/RulesInput.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit, faFile, faFolderOpen, faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getGalaxyInstance } from "app";
@@ -14,8 +13,6 @@ import { RULES_TYPES } from "./utils.js";
 
 import UploadSelect from "./UploadSelect.vue";
 
-library.add(faEdit, faFile, faFolderOpen, faLock);
-
 const props = defineProps({
     hasCallback: {
         type: Boolean,
@@ -129,26 +126,26 @@ function inputRemote() {
             class="upload-box upload-rule-source-content"
             placeholder="Insert tabular source data here."
             :disabled="isDisabled" />
-        <FontAwesomeIcon v-if="isDisabled" class="upload-text-lock" icon="fa-lock" />
+        <FontAwesomeIcon v-if="isDisabled" class="upload-text-lock" :icon="faLock" />
         <div class="upload-footer text-center">
             <span class="upload-footer-title">Upload type:</span>
             <UploadSelect v-model="dataType" class="rule-data-type" :options="RULES_TYPES" :searchable="false" />
         </div>
         <div class="upload-buttons d-flex justify-content-end">
             <BButton @click="inputPaste">
-                <FontAwesomeIcon icon="fa-edit" />
+                <FontAwesomeIcon :icon="faEdit" />
                 <span v-localize>Paste data</span>
             </BButton>
             <BButton data-description="rules dataset dialog" @click="inputDialog">
-                <FontAwesomeIcon icon="fa-file" />
+                <FontAwesomeIcon :icon="faFile" />
                 <span v-localize>Choose dataset</span>
             </BButton>
             <BButton v-if="ftpUploadSite" @click="inputFtp">
-                <FontAwesomeIcon icon="fa-folder-open" />
+                <FontAwesomeIcon :icon="faFolderOpen" />
                 <span v-localize>Import FTP files</span>
             </BButton>
             <BButton @click="inputRemote">
-                <FontAwesomeIcon icon="fa-folder-open" />
+                <FontAwesomeIcon :icon="faFolderOpen" />
                 <span v-localize>Choose from repository</span>
             </BButton>
             <BButton
diff --git a/client/src/components/Upload/UploadExtension.vue b/client/src/components/Upload/UploadExtension.vue
index 38fffdccbea..d10f5400f0c 100644
--- a/client/src/components/Upload/UploadExtension.vue
+++ b/client/src/components/Upload/UploadExtension.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
@@ -8,8 +7,6 @@ import { findExtension } from "./utils";
 
 import Popper from "@/components/Popper/Popper.vue";
 
-library.add(faSearch);
-
 const props = defineProps({
     extension: {
         type: String,
@@ -27,7 +24,7 @@ const details = computed(() => findExtension(props.listExtensions, props.extensi
 <template>
     <Popper placement="bottom" mode="light">
         <template v-slot:reference>
-            <FontAwesomeIcon icon="fa-search" />
+            <FontAwesomeIcon :icon="faSearch" />
         </template>
         <div class="p-2">
             <div v-if="details && details.description">
diff --git a/client/src/components/Upload/UploadOption.vue b/client/src/components/Upload/UploadOption.vue
index d9c2925a42f..916515049a4 100644
--- a/client/src/components/Upload/UploadOption.vue
+++ b/client/src/components/Upload/UploadOption.vue
@@ -1,11 +1,8 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faCheckSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-library.add(faCheckSquare, faSquare);
-
 defineProps({
     title: {
         type: String,
@@ -23,8 +20,8 @@ const emit = defineEmits("click");
 <template>
     <tr @click="emit('click')">
         <td>
-            <FontAwesomeIcon v-if="value" class="px-2" icon="fas fa-check-square" fa-fw />
-            <FontAwesomeIcon v-else class="px-2" icon="far fa-square" fa-fw />
+            <FontAwesomeIcon v-if="value" class="px-2" :icon="faCheckSquare" fa-fw />
+            <FontAwesomeIcon v-else class="px-2" :icon="faSquare" fa-fw />
         </td>
         <td class="text-left">
             <span v-localize class="pr-2">{{ title }}</span>
diff --git a/client/src/components/Upload/UploadSelectExtension.vue b/client/src/components/Upload/UploadSelectExtension.vue
index 0f75026b534..661ec5d69eb 100644
--- a/client/src/components/Upload/UploadSelectExtension.vue
+++ b/client/src/components/Upload/UploadSelectExtension.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
@@ -10,8 +9,6 @@ import UploadExtension from "./UploadExtension.vue";
 import UploadSelect from "./UploadSelect.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
-library.add(faExclamationCircle);
-
 const props = defineProps({
     disabled: {
         type: Boolean,
@@ -45,7 +42,7 @@ const warnText = computed(() => details.value.upload_warning);
             @input="(newValue) => emit('input', newValue)" />
         <Popper v-if="warnText" placement="bottom" mode="light">
             <template v-slot:reference>
-                <FontAwesomeIcon icon="fa-exclamation-circle" class="selection-warning" />
+                <FontAwesomeIcon :icon="faExclamationCircle" class="selection-warning" />
             </template>
             <div class="p-2">
                 {{ warnText }}
diff --git a/client/src/components/Upload/UploadSettings.vue b/client/src/components/Upload/UploadSettings.vue
index 34d68d43e05..14877b4d6e2 100644
--- a/client/src/components/Upload/UploadSettings.vue
+++ b/client/src/components/Upload/UploadSettings.vue
@@ -1,13 +1,10 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import UploadOption from "./UploadOption.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
-library.add(faCog);
-
 defineProps({
     deferred: {
         type: Boolean,
@@ -33,7 +30,7 @@ const emit = defineEmits(["input"]);
 <template>
     <Popper placement="bottom" title="Upload Configuration" mode="primary-title" trigger="click">
         <template v-slot:reference>
-            <FontAwesomeIcon class="cursor-pointer" icon="fa-cog" />
+            <FontAwesomeIcon class="cursor-pointer" :icon="faCog" />
         </template>
         <div class="upload-settings-content px-2 py-2 no-highlight">
             <table class="upload-settings-table grid">
diff --git a/client/src/components/User/APIKey/APIKeyItem.vue b/client/src/components/User/APIKey/APIKeyItem.vue
index c59e943fe46..a0c2db4783e 100644
--- a/client/src/components/User/APIKey/APIKeyItem.vue
+++ b/client/src/components/User/APIKey/APIKeyItem.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEye, faEyeSlash, faKey, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { getGalaxyInstance } from "app";
 import CopyToClipboard from "components/CopyToClipboard";
@@ -9,8 +8,6 @@ import { ref } from "vue";
 
 import svc from "./model/service";
 
-library.add(faEye, faEyeSlash, faKey, faTrash);
-
 defineProps({
     item: {
         type: Object,
diff --git a/client/src/components/User/DiskUsage/Visualizations/RecoverableItemSizeTooltip.vue b/client/src/components/User/DiskUsage/Visualizations/RecoverableItemSizeTooltip.vue
index 2806f31c167..3bfc6d374ac 100644
--- a/client/src/components/User/DiskUsage/Visualizations/RecoverableItemSizeTooltip.vue
+++ b/client/src/components/User/DiskUsage/Visualizations/RecoverableItemSizeTooltip.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faArchive } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
@@ -8,8 +7,6 @@ import { bytesToString } from "@/utils/utils";
 
 import type { DataValuePoint } from "./Charts";
 
-library.add(faArchive);
-
 interface RecoverableItemSizeTooltipProps {
     data: DataValuePoint;
     isRecoverable: boolean;
@@ -27,7 +24,7 @@ const prettySize = computed(() => bytesToString(props.data?.value ?? 0));
     <div>
         <div class="h-md mx-2">{{ label }}</div>
         <b class="h-md m-2">{{ prettySize }}</b>
-        <div v-if="isArchived" class="text-muted mx-2"><FontAwesomeIcon icon="archive" /> This item is archived</div>
+        <div v-if="isArchived" class="text-muted mx-2"><FontAwesomeIcon :icon="faArchive" /> This item is archived</div>
         <div v-if="isRecoverable" class="text-muted mx-2">Recoverable storage space</div>
     </div>
 </template>
diff --git a/client/src/components/User/DiskUsage/Visualizations/util.ts b/client/src/components/User/DiskUsage/Visualizations/util.ts
index cd7b3f3f2fe..bee66b3b1f4 100644
--- a/client/src/components/User/DiskUsage/Visualizations/util.ts
+++ b/client/src/components/User/DiskUsage/Visualizations/util.ts
@@ -1,4 +1,3 @@
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { computed, onMounted, ref } from "vue";
 
@@ -10,8 +9,6 @@ import type { DataValuePoint } from "./Charts";
 import { bytesLabelFormatter, bytesValueFormatter } from "./Charts/formatters";
 import { type ItemSizeSummary, purgeDatasetById, undeleteDatasetById } from "./service";
 
-library.add(faAngleDoubleUp, faAngleDoubleDown);
-
 interface DataLoader {
     (): Promise<void>;
 }
diff --git a/client/src/components/User/Notifications/NotificationsChannelSettings.vue b/client/src/components/User/Notifications/NotificationsChannelSettings.vue
index 032fd9b2326..e72f24f2805 100644
--- a/client/src/components/User/Notifications/NotificationsChannelSettings.vue
+++ b/client/src/components/User/Notifications/NotificationsChannelSettings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref, watch } from "vue";
@@ -7,8 +6,6 @@ import { ref, watch } from "vue";
 import type { NotificationCategory, NotificationChannel, UserNotificationPreferences } from "@/api/notifications";
 import { snakeCaseToTitleCase } from "@/utils/strings";
 
-library.add(faExclamationCircle);
-
 interface NotificationsChannelSettingsProps {
     preferences: UserNotificationPreferences;
     category: NotificationCategory;
diff --git a/client/src/components/User/Notifications/NotificationsPreferences.vue b/client/src/components/User/Notifications/NotificationsPreferences.vue
index 37b8172e4dd..f2118019555 100644
--- a/client/src/components/User/Notifications/NotificationsPreferences.vue
+++ b/client/src/components/User/Notifications/NotificationsPreferences.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckCircle, faExclamationCircle, faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton } from "bootstrap-vue";
@@ -21,8 +20,6 @@ import AsyncButton from "@/components/Common/AsyncButton.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faCheckCircle, faExclamationCircle, faSave);
-
 interface NotificationsPreferencesProps {
     embedded?: boolean;
     headerSize?: string;
diff --git a/client/src/components/Workflow/Editor/Comments/FrameComment.vue b/client/src/components/Workflow/Editor/Comments/FrameComment.vue
index 02d8c81bb6d..4b12c510b48 100644
--- a/client/src/components/Workflow/Editor/Comments/FrameComment.vue
+++ b/client/src/components/Workflow/Editor/Comments/FrameComment.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTrashAlt } from "@fortawesome/free-regular-svg-icons";
 import { faCompressAlt, faObjectGroup, faPalette } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -21,8 +20,6 @@ import { selectAllText } from "./utilities";
 import ColorSelector from "./ColorSelector.vue";
 import DraggablePan from "@/components/Workflow/Editor/DraggablePan.vue";
 
-library.add(faObjectGroup, faTrashAlt, faPalette, faCompressAlt);
-
 const props = defineProps<{
     comment: FrameWorkflowComment;
     rootOffset: UseElementBoundingReturn;
@@ -277,7 +274,7 @@ const position = computed(() => ({ x: props.comment.position[0], y: props.commen
                 @pan-by="(p) => emit('pan-by', p)" />
 
             <div class="frame-comment-header">
-                <FontAwesomeIcon icon="fas fa-object-group" />
+                <FontAwesomeIcon :icon="faObjectGroup" />
                 <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions vuejs-accessibility/click-events-have-key-events -->
                 <span
                     ref="editableElement"
@@ -298,7 +295,7 @@ const position = computed(() => ({ x: props.comment.position[0], y: props.commen
                 variant="outline-primary"
                 title="Fit to content"
                 @click="onFitToContent">
-                <FontAwesomeIcon icon="fa-compress-alt" class="prevent-zoom" />
+                <FontAwesomeIcon :icon="faCompressAlt" class="prevent-zoom" />
             </BButton>
             <BButton
                 class="button prevent-zoom"
@@ -306,10 +303,10 @@ const position = computed(() => ({ x: props.comment.position[0], y: props.commen
                 title="Color"
                 :pressed="showColorSelector"
                 @click="() => (showColorSelector = !showColorSelector)">
-                <FontAwesomeIcon icon="fa-palette" class="prevent-zoom" />
+                <FontAwesomeIcon :icon="faPalette" class="prevent-zoom" />
             </BButton>
             <BButton class="button prevent-zoom" variant="dark" title="Delete comment" @click="() => emit('remove')">
-                <FontAwesomeIcon icon="far fa-trash-alt" class="prevent-zoom" />
+                <FontAwesomeIcon :icon="faTrashAlt" class="prevent-zoom" />
             </BButton>
         </BButtonGroup>
 
diff --git a/client/src/components/Workflow/Editor/Comments/MarkdownComment.vue b/client/src/components/Workflow/Editor/Comments/MarkdownComment.vue
index cc1d8dcd9ca..4af2d6ce080 100644
--- a/client/src/components/Workflow/Editor/Comments/MarkdownComment.vue
+++ b/client/src/components/Workflow/Editor/Comments/MarkdownComment.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTrashAlt } from "@fortawesome/free-regular-svg-icons";
 import { faPalette } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -19,8 +18,6 @@ import { selectAllText } from "./utilities";
 import ColorSelector from "./ColorSelector.vue";
 import DraggablePan from "@/components/Workflow/Editor/DraggablePan.vue";
 
-library.add(faTrashAlt, faPalette);
-
 const props = defineProps<{
     comment: MarkdownWorkflowComment;
     rootOffset: UseElementBoundingReturn;
@@ -175,10 +172,10 @@ const position = computed(() => ({ x: props.comment.position[0], y: props.commen
                 title="Color"
                 :pressed="showColorSelector"
                 @click="() => (showColorSelector = !showColorSelector)">
-                <FontAwesomeIcon icon="fa-palette" class="prevent-zoom" />
+                <FontAwesomeIcon :icon="faPalette" class="prevent-zoom" />
             </BButton>
             <BButton class="button prevent-zoom" variant="dark" title="Delete comment" @click="() => emit('remove')">
-                <FontAwesomeIcon icon="far fa-trash-alt" class="prevent-zoom" />
+                <FontAwesomeIcon :icon="faTrashAlt" class="prevent-zoom" />
             </BButton>
         </BButtonGroup>
 
diff --git a/client/src/components/Workflow/Editor/Comments/TextComment.vue b/client/src/components/Workflow/Editor/Comments/TextComment.vue
index 634e312d276..adc325b0793 100644
--- a/client/src/components/Workflow/Editor/Comments/TextComment.vue
+++ b/client/src/components/Workflow/Editor/Comments/TextComment.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTrashAlt } from "@fortawesome/free-regular-svg-icons";
 import { faPalette } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -18,8 +17,6 @@ import { selectAllText } from "./utilities";
 import ColorSelector from "./ColorSelector.vue";
 import DraggablePan from "@/components/Workflow/Editor/DraggablePan.vue";
 
-library.add(faTrashAlt, faPalette);
-
 const props = defineProps<{
     comment: TextWorkflowComment;
     rootOffset: UseElementBoundingReturn;
@@ -239,7 +236,7 @@ const position = computed(() => ({ x: props.comment.position[0], y: props.commen
                 title="Color"
                 :pressed="showColorSelector"
                 @click="() => (showColorSelector = !showColorSelector)">
-                <FontAwesomeIcon icon="fa-palette" class="prevent-zoom" />
+                <FontAwesomeIcon :icon="faPalette" class="prevent-zoom" />
             </BButton>
             <BButton
                 class="button prevent-zoom"
@@ -256,7 +253,7 @@ const position = computed(() => ({ x: props.comment.position[0], y: props.commen
                 <FontAwesomeIcon :icon="['gxd', 'textLarger']" class="prevent-zoom" />
             </BButton>
             <BButton class="button prevent-zoom" variant="dark" title="Delete comment" @click="() => emit('remove')">
-                <FontAwesomeIcon icon="far fa-trash-alt" class="prevent-zoom" />
+                <FontAwesomeIcon :icon="faTrashAlt" class="prevent-zoom" />
             </BButton>
         </BButtonGroup>
 
diff --git a/client/src/components/Workflow/Editor/Forms/FormColumnDefinitions.vue b/client/src/components/Workflow/Editor/Forms/FormColumnDefinitions.vue
index 594bc50f7ff..2dda0372950 100644
--- a/client/src/components/Workflow/Editor/Forms/FormColumnDefinitions.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormColumnDefinitions.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCaretDown, faCaretUp, faPlus, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink } from "bootstrap-vue";
 import { computed } from "vue";
@@ -14,8 +12,6 @@ import FormColumnDefinition from "./FormColumnDefinition.vue";
 import DownloadWorkbookButton from "@/components/Collections/sheet/DownloadWorkbookButton.vue";
 import FormCard from "@/components/Form/FormCard.vue";
 
-library.add(faPlus, faTrashAlt, faCaretUp, faCaretDown);
-
 interface Props {
     value: SampleSheetColumnDefinitions;
     collectionType: SampleSheetCollectionType;
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 908a41df2d4..cc5a27075b9 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -174,13 +174,13 @@
                             :title="undoRedoStore.undoText + ' (Ctrl + Z)'"
                             :variant="undoRedoStore.hasUndo ? 'secondary' : 'muted'"
                             @click="undoRedoStore.undo()">
-                            <FontAwesomeIcon icon="fa-arrow-left" />
+                            <FontAwesomeIcon :icon="faArrowLeft" />
                         </b-button>
                         <b-button
                             :title="undoRedoStore.redoText + ' (Ctrl + Shift + Z)'"
                             :variant="undoRedoStore.hasRedo ? 'secondary' : 'muted'"
                             @click="undoRedoStore.redo()">
-                            <FontAwesomeIcon icon="fa-arrow-right" />
+                            <FontAwesomeIcon :icon="faArrowRight" />
                         </b-button>
                         <b-button
                             id="workflow-save-button"
@@ -238,17 +238,7 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-    faArrowLeft,
-    faArrowRight,
-    faCog,
-    faHistory,
-    faKey,
-    faSave,
-    faTimes,
-    faWrench,
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faArrowRight, faCog, faKey, faSave, faTimes, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { until, whenever } from "@vueuse/core";
 import { logicAnd, logicNot, logicOr } from "@vueuse/math";
@@ -301,8 +291,6 @@ import UserToolPanel from "@/components/Panels/UserToolPanel.vue";
 import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
 
-library.add(faArrowLeft, faArrowRight, faHistory);
-
 export default {
     components: {
         ActivityBar,
@@ -735,6 +723,8 @@ export default {
             debounceTimer: null,
             showSaveChangesModal: false,
             navUrl: "",
+            faArrowLeft,
+            faArrowRight,
             faTimes,
             faCog,
             faSave,
diff --git a/client/src/components/Workflow/Editor/Lint.vue b/client/src/components/Workflow/Editor/Lint.vue
index 9bd8da79e43..0209f0d645b 100644
--- a/client/src/components/Workflow/Editor/Lint.vue
+++ b/client/src/components/Workflow/Editor/Lint.vue
@@ -74,15 +74,14 @@
             @onMouseLeave="onUnhighlight"
             @onClick="onFixUnlabeledOutputs" />
         <div v-if="!hasActiveOutputs">
-            <FontAwesomeIcon icon="exclamation-triangle" class="text-warning" />
+            <FontAwesomeIcon :icon="faExclamationTriangle" class="text-warning" />
             <span>This workflow has no labeled outputs, please select and label at least one output.</span>
         </div>
     </ActivityPanel>
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faExclamationTriangle, faMagic } from "@fortawesome/free-solid-svg-icons";
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
 import { UntypedParameters } from "components/Workflow/Editor/modules/parameters";
@@ -114,9 +113,6 @@ import LintSection from "@/components/Workflow/Editor/LintSection.vue";
 
 Vue.use(BootstrapVue);
 
-library.add(faExclamationTriangle);
-library.add(faMagic);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -167,6 +163,7 @@ export default {
             bestPracticeWarningCreator: bestPracticeWarningCreator,
             bestPracticeWarningLicense: bestPracticeWarningLicense,
             bestPracticeWarningReadme: bestPracticeWarningReadme,
+            faExclamationTriangle,
         };
     },
     computed: {
diff --git a/client/src/components/Workflow/Editor/LintSection.vue b/client/src/components/Workflow/Editor/LintSection.vue
index 9521a1bd9b6..565b4b7d37d 100644
--- a/client/src/components/Workflow/Editor/LintSection.vue
+++ b/client/src/components/Workflow/Editor/LintSection.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="mb-2" :data-lint-status="isOkay ? 'ok' : 'warning'">
         <div v-if="isOkay">
-            <FontAwesomeIcon icon="check" class="text-success" />
+            <FontAwesomeIcon :icon="faCheck" class="text-success" />
             <span>{{ successMessage }}</span>
         </div>
         <div v-else>
-            <FontAwesomeIcon icon="exclamation-triangle" class="text-warning" />
+            <FontAwesomeIcon :icon="faExclamationTriangle" class="text-warning" />
             <span>{{ warningMessage | localize }}</span>
             <div v-if="hasWarningItems" class="mt-2">
                 <div
@@ -22,21 +22,22 @@
                         :data-item-index="idx"
                         v-bind="dataAttributes(item)"
                         @click="onClick(item)">
-                        <FontAwesomeIcon v-if="item.autofix" icon="magic" class="mr-1" />
-                        <FontAwesomeIcon v-else icon="search" class="mr-1" />
+                        <FontAwesomeIcon v-if="item.autofix" :icon="faMagic" class="mr-1" />
+                        <FontAwesomeIcon v-else :icon="faSearch" class="mr-1" />
                         {{ item.stepLabel }}: {{ item.warningLabel }}
                     </a>
                 </div>
             </div>
             <p v-else class="mt-2 ml-2">
-                <a href="#" @click="onClick"> <FontAwesomeIcon icon="pencil-alt" class="mr-1" />{{ attributeLink }} </a>
+                <a href="#" @click="onClick">
+                    <FontAwesomeIcon :icon="faPencilAlt" class="mr-1" />{{ attributeLink }}
+                </a>
             </p>
         </div>
     </div>
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faExclamationTriangle, faMagic, faPencilAlt, faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
@@ -46,12 +47,6 @@ import { dataAttributes } from "./modules/linting";
 
 Vue.use(BootstrapVue);
 
-library.add(faMagic);
-library.add(faSearch);
-library.add(faPencilAlt);
-library.add(faCheck);
-library.add(faExclamationTriangle);
-
 export default {
     components: {
         FontAwesomeIcon,
@@ -78,6 +73,15 @@ export default {
             default: null,
         },
     },
+    data() {
+        return {
+            faCheck,
+            faExclamationTriangle,
+            faMagic,
+            faPencilAlt,
+            faSearch,
+        };
+    },
     computed: {
         isOkay() {
             return this.okay && !this.hasWarningItems;
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 8974d672753..6e40c4e7f94 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -82,7 +82,7 @@
             </b-button-group>
             <i :class="iconClass" />
             <span v-if="step.when" v-b-tooltip.hover title="This step is conditionally executed.">
-                <FontAwesomeIcon icon="fa-code-branch" />
+                <FontAwesomeIcon :icon="faCodeBranch" />
             </span>
             <span
                 v-b-tooltip.hover
@@ -158,7 +158,6 @@
 </template>
 
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCodeBranch, faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { UseElementBoundingReturn, UseScrollReturn, VueInstance } from "@vueuse/core";
@@ -190,8 +189,6 @@ import Recommendations from "@/components/Workflow/Editor/Recommendations.vue";
 
 Vue.use(BootstrapVue);
 
-library.add(faCodeBranch);
-
 const props = defineProps({
     id: { type: Number, required: true },
     contentId: { type: String as PropType<string | null>, default: null },
diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 1949bc36d39..cc0424d1ba7 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronCircleRight, faMinusSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDebounce, type UseElementBoundingReturn } from "@vueuse/core";
@@ -31,8 +30,6 @@ import type { InputTerminalSource } from "@/stores/workflowStepStore";
 import { useRelativePosition } from "./composables/relativePosition";
 import { useTerminal } from "./composables/useTerminal";
 
-library.add(faChevronCircleRight, faMinusSquare);
-
 const props = defineProps({
     input: {
         type: Object as PropType<InputTerminalSource>,
@@ -236,7 +233,7 @@ watch(
             <b-tooltip v-if="reason" :target="id" :show="showTooltip">
                 {{ reason }}
             </b-tooltip>
-            <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
+            <FontAwesomeIcon class="terminal-icon" :icon="faChevronCircleRight" />
         </div>
         <button
             v-if="hasConnections && !readonly"
@@ -244,7 +241,7 @@ watch(
             :title="reason"
             class="delete-terminal-button"
             @click="onRemove">
-            <FontAwesomeIcon class="delete-button-icon" icon="fa-minus-square" />
+            <FontAwesomeIcon class="delete-button-icon" :icon="faMinusSquare" />
         </button>
         <span v-if="!blank">{{ label }}</span>
         <span
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 4f75d49907e..bdf0fb4884b 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import {
     faCheckSquare,
@@ -41,8 +40,6 @@ import ConnectionMenu from "@/components/Workflow/Editor/ConnectionMenu.vue";
 
 type ElementBounding = UnwrapRef<UseElementBoundingReturn>;
 
-library.add(faSquare, faCheckSquare, faChevronCircleRight, faEye, faEyeSlash, faMinus, faPlus);
-
 const props = defineProps<{
     output: OutputTerminalSource;
     workflowOutputs: NonNullable<Step["workflow_outputs"]>;
@@ -361,8 +358,8 @@ const removeTagsAction = computed(() => {
                     :class="{ 'mark-terminal-active': workflowOutput }"
                     title="Checked outputs will become primary workflow outputs and are available as subworkflow outputs."
                     @click="onToggleActive">
-                    <FontAwesomeIcon v-if="workflowOutput" fixed-width icon="fa-check-square" />
-                    <FontAwesomeIcon v-else fixed-width icon="far fa-square" />
+                    <FontAwesomeIcon v-if="workflowOutput" fixed-width :icon="faCheckSquare" />
+                    <FontAwesomeIcon v-else fixed-width :icon="faSquare" />
                 </button>
                 <button
                     v-if="showCalloutVisible"
@@ -371,8 +368,8 @@ const removeTagsAction = computed(() => {
                     :class="{ 'mark-terminal-visible': isVisible, 'mark-terminal-hidden': !isVisible }"
                     :title="visibleHint"
                     @click="onToggleVisible">
-                    <FontAwesomeIcon v-if="isVisible" fixed-width icon="fa-eye" />
-                    <FontAwesomeIcon v-else fixed-width icon="fa-eye-slash" />
+                    <FontAwesomeIcon v-if="isVisible" fixed-width :icon="faEye" />
+                    <FontAwesomeIcon v-else fixed-width :icon="faEyeSlash" />
                 </button>
                 <span>
                     <span
@@ -392,7 +389,7 @@ const removeTagsAction = computed(() => {
                 v-b-tooltip.left
                 class="d-flex align-items-center overflow-x-hidden"
                 title="These tags will be added to the output dataset">
-                <FontAwesomeIcon icon="fa-plus" class="mr-1" />
+                <FontAwesomeIcon :icon="faPlus" class="mr-1" />
                 <StatelessTags disabled no-padding :value="addTagsAction" />
             </div>
 
@@ -401,7 +398,7 @@ const removeTagsAction = computed(() => {
                 v-b-tooltip.left
                 class="d-flex align-items-center overflow-x-hidden"
                 title="These tags will be removed from the output dataset">
-                <FontAwesomeIcon icon="fa-minus" class="mr-1" />
+                <FontAwesomeIcon :icon="faMinus" class="mr-1" />
                 <StatelessTags disabled no-padding :value="removeTagsAction" />
             </div>
         </div>
@@ -429,7 +426,7 @@ const removeTagsAction = computed(() => {
                 :aria-label="`Connect output ${output.name} to input. Press space to see a list of available inputs`"
                 @click="toggleChildComponent"></button>
 
-            <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
+            <FontAwesomeIcon class="terminal-icon" :icon="faChevronCircleRight" />
 
             <ConnectionMenu
                 v-if="showChildComponent"
diff --git a/client/src/components/Workflow/Editor/SaveChangesModal.vue b/client/src/components/Workflow/Editor/SaveChangesModal.vue
index 132f6d23cbf..181fa57eab0 100644
--- a/client/src/components/Workflow/Editor/SaveChangesModal.vue
+++ b/client/src/components/Workflow/Editor/SaveChangesModal.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSave, faTimes, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BModal } from "bootstrap-vue";
@@ -7,8 +6,6 @@ import { ref } from "vue";
 
 import localize from "@/utils/localization";
 
-library.add(faSave, faTimes, faTrash);
-
 interface Props {
     /** Show the save changes modal */
     showModal: boolean;
diff --git a/client/src/components/Workflow/Editor/Tools/ToolBar.vue b/client/src/components/Workflow/Editor/Tools/ToolBar.vue
index c7552c55eb4..dc17ff7481a 100644
--- a/client/src/components/Workflow/Editor/Tools/ToolBar.vue
+++ b/client/src/components/Workflow/Editor/Tools/ToolBar.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faMarkdown } from "@fortawesome/free-brands-svg-icons";
 import {
     faChevronDown,
@@ -35,20 +34,6 @@ import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 import ColorSelector from "@/components/Workflow/Editor/Comments/ColorSelector.vue";
 
-library.add(
-    faMarkdown,
-    faChevronDown,
-    faChevronUp,
-    faClone,
-    faEraser,
-    faMagnet,
-    faMousePointer,
-    faObjectGroup,
-    faPen,
-    faTimes,
-    faTrash,
-);
-
 const { toolbarStore, undoRedoStore, commentStore, workflowId } = useWorkflowStores();
 const { snapActive, currentTool } = toRefs(toolbarStore);
 
@@ -173,7 +158,7 @@ function autoLayout() {
                         title="Pointer Tool (Ctrl + 1)"
                         :pressed="currentTool === 'pointer'"
                         @click="onClickPointer">
-                        <FontAwesomeIcon icon="fa-mouse-pointer" size="lg" />
+                        <FontAwesomeIcon :icon="faMousePointer" size="lg" />
                     </GButton>
                     <GButton
                         tooltip
@@ -184,7 +169,7 @@ function autoLayout() {
                         data-tool="toggle_snap"
                         :title="snapButtonTitle"
                         :pressed.sync="snapActive">
-                        <FontAwesomeIcon icon="fa-magnet" size="lg" />
+                        <FontAwesomeIcon :icon="faMagnet" size="lg" />
                     </GButton>
                 </GButtonGroup>
 
@@ -211,7 +196,7 @@ function autoLayout() {
                         title="Markdown comment (Ctrl + 4)"
                         :pressed="currentTool === 'markdownComment'"
                         @click="() => onCommentToolClick('markdownComment')">
-                        <FontAwesomeIcon :icon="['fab', 'markdown']" size="lg" />
+                        <FontAwesomeIcon :icon="faMarkdown" size="lg" />
                     </GButton>
                     <GButton
                         tooltip
@@ -223,7 +208,7 @@ function autoLayout() {
                         title="Frame comment (Ctrl + 5)"
                         :pressed="currentTool === 'frameComment'"
                         @click="() => onCommentToolClick('frameComment')">
-                        <FontAwesomeIcon icon="fa-object-group" size="lg" />
+                        <FontAwesomeIcon :icon="faObjectGroup" size="lg" />
                     </GButton>
                 </GButtonGroup>
 
@@ -238,7 +223,7 @@ function autoLayout() {
                         :pressed="currentTool === 'freehandComment'"
                         class="button"
                         @click="() => onCommentToolClick('freehandComment')">
-                        <FontAwesomeIcon icon="fa-pen" size="lg" />
+                        <FontAwesomeIcon :icon="faPen" size="lg" />
                     </GButton>
                     <GButton
                         tooltip
@@ -250,7 +235,7 @@ function autoLayout() {
                         :pressed="currentTool === 'freehandEraser'"
                         class="button"
                         @click="() => onCommentToolClick('freehandEraser')">
-                        <FontAwesomeIcon icon="fa-eraser" size="lg" />
+                        <FontAwesomeIcon :icon="faEraser" size="lg" />
                     </GButton>
                 </GButtonGroup>
 
@@ -290,8 +275,8 @@ function autoLayout() {
                 class="toggle-visibility-button"
                 :title="toggleVisibilityButtonTitle"
                 @click="toolbarVisible = !toolbarVisible">
-                <FontAwesomeIcon v-if="toolbarVisible" icon="fa-chevron-up" />
-                <FontAwesomeIcon v-else icon="fa-chevron-down" />
+                <FontAwesomeIcon v-if="toolbarVisible" :icon="faChevronUp" />
+                <FontAwesomeIcon v-else :icon="faChevronDown" />
             </GButton>
         </div>
         <div v-if="toolbarVisible" class="options">
@@ -300,13 +285,13 @@ function autoLayout() {
 
                 <GButtonGroup>
                     <GButton class="button" title="clear selection" @click="deselectAll">
-                        Clear <FontAwesomeIcon icon="fa-times" />
+                        Clear <FontAwesomeIcon :icon="faTimes" />
                     </GButton>
                     <GButton class="button" title="duplicate selected" @click="duplicateSelection">
-                        Duplicate <FontAwesomeIcon icon="fa-clone" />
+                        Duplicate <FontAwesomeIcon :icon="faClone" />
                     </GButton>
                     <GButton class="button" title="delete selected" @click="deleteSelection">
-                        Delete <FontAwesomeIcon icon="fa-trash" />
+                        Delete <FontAwesomeIcon :icon="faTrash" />
                     </GButton>
                 </GButtonGroup>
             </div>
diff --git a/client/src/components/Workflow/Import/TrsSearch.vue b/client/src/components/Workflow/Import/TrsSearch.vue
index cf32ca6fde6..1642267d1ae 100644
--- a/client/src/components/Workflow/Import/TrsSearch.vue
+++ b/client/src/components/Workflow/Import/TrsSearch.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
@@ -18,8 +17,6 @@ import LoadingSpan from "@/components/LoadingSpan.vue";
 import TrsServerSelection from "@/components/Workflow/Import/TrsServerSelection.vue";
 import TrsTool from "@/components/Workflow/Import/TrsTool.vue";
 
-library.add(faQuestion, faTimes);
-
 type TrsSearchData = {
     id: string;
     name: string;
diff --git a/client/src/components/Workflow/Import/TrsServerSelection.vue b/client/src/components/Workflow/Import/TrsServerSelection.vue
index 97980052599..91effe31c1b 100644
--- a/client/src/components/Workflow/Import/TrsServerSelection.vue
+++ b/client/src/components/Workflow/Import/TrsServerSelection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BLink } from "bootstrap-vue";
@@ -9,8 +8,6 @@ import { Services } from "@/components/Workflow/services";
 
 import type { TrsSelection } from "./types";
 
-library.add(faCaretDown);
-
 interface Props {
     queryTrsServer?: string;
     trsSelection?: TrsSelection | null;
diff --git a/client/src/components/Workflow/Import/TrsTool.vue b/client/src/components/Workflow/Import/TrsTool.vue
index 3ac9bcfa872..3ba80a4a608 100644
--- a/client/src/components/Workflow/Import/TrsTool.vue
+++ b/client/src/components/Workflow/Import/TrsTool.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
@@ -8,8 +7,6 @@ import { useMarkdown } from "@/composables/markdown";
 
 import type { TrsTool, TrsToolVersion } from "./types";
 
-library.add(faUpload);
-
 interface Props {
     trsTool: TrsTool;
 }
diff --git a/client/src/components/Workflow/Invocation/Export/ExportButton.vue b/client/src/components/Workflow/Invocation/Export/ExportButton.vue
index fbd5a9ee48d..20a5348620d 100644
--- a/client/src/components/Workflow/Invocation/Export/ExportButton.vue
+++ b/client/src/components/Workflow/Invocation/Export/ExportButton.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import { type IconDefinition, library } from "@fortawesome/fontawesome-svg-core";
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed } from "vue";
 
-library.add(faSpinner);
-
 interface Props {
     title: string;
     idleIcon: IconDefinition;
diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
index 1c44adc083a..7d0e8cbeb18 100644
--- a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -1,15 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-    faArrowCircleLeft,
-    faArrowCircleRight,
-    faArrowDown,
-    faChevronDown,
-    faChevronUp,
-    faSignInAlt,
-    faSitemap,
-    faTimes,
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowCircleLeft, faArrowCircleRight, faArrowDown, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { until } from "@vueuse/core";
 import { BAlert, BCard, BCardBody, BCardHeader } from "bootstrap-vue";
@@ -29,8 +19,6 @@ import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 import WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
 import WorkflowInvocationStepHeader from "@/components/WorkflowInvocationState/WorkflowInvocationStepHeader.vue";
 
-library.add(faArrowDown, faChevronDown, faChevronUp, faSignInAlt, faSitemap, faTimes);
-
 interface Props {
     /** The invocation to display */
     invocation: WorkflowInvocationElementView;
diff --git a/client/src/components/Workflow/List/WorkflowListActions.vue b/client/src/components/Workflow/List/WorkflowListActions.vue
index dfefb47ebb7..e85a1153a32 100644
--- a/client/src/components/Workflow/List/WorkflowListActions.vue
+++ b/client/src/components/Workflow/List/WorkflowListActions.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
@@ -9,8 +8,6 @@ import { useUserStore } from "@/stores/userStore";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 
-library.add(faPlus, faUpload);
-
 const router = useRouter();
 
 const userStore = useUserStore();
diff --git a/client/src/components/Workflow/Published/WorkflowInformation.vue b/client/src/components/Workflow/Published/WorkflowInformation.vue
index c483bea1b45..42e3a0f81bb 100644
--- a/client/src/components/Workflow/Published/WorkflowInformation.vue
+++ b/client/src/components/Workflow/Published/WorkflowInformation.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBuilding, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
@@ -15,8 +14,6 @@ import License from "@/components/License/License.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
-library.add(faBuilding, faUser);
-
 interface Props {
     workflowInfo: StoredWorkflowDetailed;
     embedded?: boolean;
@@ -91,8 +88,8 @@ function hasDoi() {
 
             <ul class="list-unstyled mb-0">
                 <li v-for="(creator, index) in workflowInfo.creator" :key="index">
-                    <FontAwesomeIcon v-if="creator.class === 'Person'" icon="fa-user" />
-                    <FontAwesomeIcon v-if="creator.class === 'Organization'" icon="fa-building" />
+                    <FontAwesomeIcon v-if="creator.class === 'Person'" :icon="faUser" />
+                    <FontAwesomeIcon v-if="creator.class === 'Organization'" :icon="faBuilding" />
                     {{ creator.name }}
                 </li>
             </ul>
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index 30973d4536c..87497364d57 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBuilding, faDownload, faEdit, faPlay, faSpinner, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { until } from "@vueuse/core";
 import { BAlert, BCard } from "bootstrap-vue";
@@ -21,8 +20,6 @@ import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 import WorkflowInformation from "@/components/Workflow/Published/WorkflowInformation.vue";
 import WorkflowPublishedButtons from "@/components/Workflow/Published/WorkflowPublishedButtons.vue";
 
-library.add(faBuilding, faDownload, faEdit, faPlay, faSpinner, faUser);
-
 interface Props {
     id: string;
     version?: number;
diff --git a/client/src/components/Workflow/Published/WorkflowPublishedButtons.vue b/client/src/components/Workflow/Published/WorkflowPublishedButtons.vue
index 1f561644c34..b38ea9b96c4 100644
--- a/client/src/components/Workflow/Published/WorkflowPublishedButtons.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublishedButtons.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBuilding, faDownload, faEdit, faPlay, faSpinner, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faEdit, faPlay } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 import { computed } from "vue";
@@ -9,8 +8,6 @@ import type { StoredWorkflowDetailed } from "@/api/workflows";
 import { useUserStore } from "@/stores/userStore";
 import { withPrefix } from "@/utils/redirect";
 
-library.add(faBuilding, faDownload, faEdit, faPlay, faSpinner, faUser);
-
 const props = defineProps<{
     id: string;
     embed?: boolean;
diff --git a/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue b/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue
index fcdbb6d983a..fabb3b769bd 100644
--- a/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunDefaultStep.vue
@@ -30,8 +30,7 @@
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEdit, faKey, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { faKey } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import FormCard from "components/Form/FormCard";
 import FormDisplay from "components/Form/FormDisplay";
@@ -45,8 +44,6 @@ import { getTool } from "./services";
 
 import ToolCredentials from "@/components/Tool/ToolCredentials.vue";
 
-library.add(faEdit, faUndo);
-
 export default {
     components: {
         FontAwesomeIcon,
diff --git a/client/src/components/Workflow/WorkflowCreate.vue b/client/src/components/Workflow/WorkflowCreate.vue
index cc95a1a8455..74d22553f0d 100644
--- a/client/src/components/Workflow/WorkflowCreate.vue
+++ b/client/src/components/Workflow/WorkflowCreate.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import type { AxiosError } from "axios";
 import { BFormInput } from "bootstrap-vue";
@@ -12,8 +11,6 @@ import { Toast } from "@/composables/toast";
 import AsyncButton from "@/components/Common/AsyncButton.vue";
 import Heading from "@/components/Common/Heading.vue";
 
-library.add(faCheck);
-
 interface Pros {
     showHeading: boolean;
 }
diff --git a/client/src/components/admin/AdminHome.vue b/client/src/components/admin/AdminHome.vue
index 173a840558e..99a50482f95 100644
--- a/client/src/components/admin/AdminHome.vue
+++ b/client/src/components/admin/AdminHome.vue
@@ -135,16 +135,12 @@
 </template>
 
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faServer, faUser, faWrench } from "@fortawesome/free-solid-svg-icons";
 import { computed } from "vue";
 
 import { useConfig } from "@/composables/config";
 
 import Heading from "components/Common/Heading.vue";
 
-library.add(faServer, faUser, faWrench);
-
 const { config, isConfigLoaded } = useConfig();
 
 const isToolshedInstalled = computed(() => {
diff --git a/client/src/components/admin/Notifications/BroadcastCard.vue b/client/src/components/admin/Notifications/BroadcastCard.vue
index 66cbd8cfe56..7a3ae311557 100644
--- a/client/src/components/admin/Notifications/BroadcastCard.vue
+++ b/client/src/components/admin/Notifications/BroadcastCard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import {
     faBroadcastTower,
     faClock,
@@ -21,8 +20,6 @@ import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 import Heading from "@/components/Common/Heading.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
-library.add(faBroadcastTower, faClock, faEdit, faHourglassHalf, faInfoCircle, faTrash);
-
 const { confirm } = useConfirmDialog();
 const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
diff --git a/client/src/components/admin/Notifications/BroadcastsList.vue b/client/src/components/admin/Notifications/BroadcastsList.vue
index 86204a28cfb..243a4986a57 100644
--- a/client/src/components/admin/Notifications/BroadcastsList.vue
+++ b/client/src/components/admin/Notifications/BroadcastsList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faClock, faHourglassHalf, faRedo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BCol, BRow } from "bootstrap-vue";
@@ -16,8 +15,6 @@ import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faCheck, faClock, faHourglassHalf, faRedo);
-
 const router = useRouter();
 
 const overlay = ref(false);