diff --git a/client/src/app/base-mvc.js b/client/src/app/base-mvc.js
index ea1b4180e309..a0b1edc56f82 100644
--- a/client/src/app/base-mvc.js
+++ b/client/src/app/base-mvc.js
@@ -381,119 +381,6 @@ var DraggableViewMixin = {
     },
 };
 
-//==============================================================================
-/** Mixin that allows a view to be selected (gen. from a list).
- *      Selection controls ($selector) may be hidden/shown/toggled.
- *          The bbone event 'selectable' is fired when the controls are shown/hidden (passed T/F).
- *      Default rendering is a font-awesome checkbox.
- *      Default selector is '.selector' within the view's $el.
- *      The bbone events 'selected' and 'de-selected' are fired when the $selector is clicked.
- *          Both events are passed the view and the (jQuery) event.
- */
-var SelectableViewMixin = {
-    /** Set up instance state vars for whether the selector is shown and whether the view has been selected */
-    initialize: function (attributes) {
-        /** is the view currently in selection mode? */
-        this.selectable = attributes.selectable || false;
-        /** is the view currently selected? */
-        this.selected = attributes.selected || false;
-    },
-
-    /** $el sub-element where the selector is rendered and what can be clicked to select. */
-    $selector: function () {
-        return this.$(".selector");
-    },
-
-    /** How the selector is rendered - defaults to font-awesome checkbox */
-    _renderSelected: function () {
-        // override
-        this.$selector()
-            .find("span")
-            .toggleClass("fa-check-square-o", this.selected)
-            .toggleClass("fa-square-o", !this.selected);
-    },
-
-    /** Toggle whether the selector is shown */
-    toggleSelector: function () {
-        //TODO: use this.selectable
-        if (!this.$selector().is(":visible")) {
-            this.showSelector();
-        } else {
-            this.hideSelector();
-        }
-    },
-
-    /** Display the selector control.
-     *  @param {Number} a jQuery fx speed
-     *  @fires: selectable which is passed true (IOW, the selector is shown) and the view
-     */
-    showSelector: function (speed) {
-        speed = speed !== undefined ? speed : this.fxSpeed;
-        // make sure selected state is represented properly
-        this.selectable = true;
-        this.trigger("selectable", true, this);
-        this._renderSelected();
-        if (speed) {
-            this.$selector().show(speed);
-        } else {
-            this.$selector().show();
-        }
-    },
-
-    /** remove the selector control
-     *  @param {Number} a jQuery fx speed
-     *  @fires: selectable which is passed false (IOW, the selector is not shown) and the view
-     */
-    hideSelector: function (speed) {
-        speed = speed !== undefined ? speed : this.fxSpeed;
-        // reverse the process from showSelect
-        this.selectable = false;
-        this.trigger("selectable", false, this);
-        if (speed) {
-            this.$selector().hide(speed);
-        } else {
-            this.$selector().hide();
-        }
-    },
-
-    /** Toggle whether the view is selected */
-    toggleSelect: function (event) {
-        if (this.selected) {
-            this.deselect(event);
-        } else {
-            this.select(event);
-        }
-    },
-
-    /** Select this view and re-render the selector control to show it
-     *  @param {Event} a jQuery event that caused the selection
-     *  @fires: selected which is passed the view and the DOM event that triggered it (optionally)
-     */
-    select: function (event) {
-        // switch icon, set selected, and trigger event
-        if (!this.selected) {
-            this.trigger("selected", this, event);
-            this.selected = true;
-            this._renderSelected();
-        }
-        return false;
-    },
-
-    /** De-select this view and re-render the selector control to show it
-     *  @param {Event} a jQuery event that caused the selection
-     *  @fires: de-selected which is passed the view and the DOM event that triggered it (optionally)
-     */
-    deselect: function (event) {
-        // switch icon, set selected, and trigger event
-        if (this.selected) {
-            this.trigger("de-selected", this, event);
-            this.selected = false;
-            this._renderSelected();
-        }
-        return false;
-    },
-};
-
 //==============================================================================
 /** Return an underscore template fn from an array of strings.
  *  @param {String[]} template      the template strings to compile into the underscore template fn
@@ -546,7 +433,6 @@ export default {
     SearchableModelMixin: SearchableModelMixin,
     HiddenUntilActivatedViewMixin: HiddenUntilActivatedViewMixin,
     DraggableViewMixin: DraggableViewMixin,
-    SelectableViewMixin: SelectableViewMixin,
     wrapTemplate: wrapTemplate,
     buildComparator: buildComparator,
 };
diff --git a/client/src/components/AboutGalaxy.vue b/client/src/components/AboutGalaxy.vue
index 8dad39ed35b1..97c7d7ec6b39 100644
--- a/client/src/components/AboutGalaxy.vue
+++ b/client/src/components/AboutGalaxy.vue
@@ -7,6 +7,7 @@ import { RouterLink } from "vue-router";
 
 import { useConfig } from "@/composables/config";
 import { getAppRoot } from "@/onload/loadConfig";
+import { galaxyLogo } from "@/utils/typedIcons";
 
 import Heading from "@/components/Common/Heading.vue";
 import ExternalLink from "@/components/ExternalLink.vue";
@@ -29,7 +30,7 @@ const versionUserDocumentationUrl = computed(() => {
 
 <template>
     <div v-if="isConfigLoaded" class="about-galaxy">
-        <Heading h1 :icon="['gxd', 'galaxyLogo']" size="lg">Help and Support</Heading>
+        <Heading h1 :icon="galaxyLogo" size="lg">Help and Support</Heading>
         <div class="p-2">
             <Heading h2 separator size="md">Support</Heading>
             <div v-if="config.wiki_url">
diff --git a/client/src/components/Annotation.vue b/client/src/components/Annotation.vue
deleted file mode 100644
index 8bc0aa4224c3..000000000000
--- a/client/src/components/Annotation.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <ClickToEdit
-        ref="annotationInput"
-        v-slot="{ toggleEdit, placeholder, stateValidator }"
-        v-b-tooltip.hover="{ boundary: 'viewport', placement: tooltipPlacement }"
-        class="annotation"
-        tag-name="p"
-        :value="annotation"
-        :title="'Edit annotation...' | localize"
-        :placeholder="'Edit annotation...' | localize">
-        <DebouncedInput v-slot="inputScope" v-model="annotation" :delay="1000">
-            <b-form-textarea
-                size="sm"
-                tabindex="-1"
-                rows="3"
-                no-resize
-                :value="inputScope.value"
-                :placeholder="placeholder"
-                :state="stateValidator(inputScope.value, annotation)"
-                @input="inputScope.input"
-                @blur="toggleEdit(false)"></b-form-textarea>
-        </DebouncedInput>
-    </ClickToEdit>
-</template>
-
-<script>
-import ClickToEdit from "./ClickToEdit";
-import DebouncedInput from "./DebouncedInput";
-
-export default {
-    components: {
-        DebouncedInput,
-        ClickToEdit,
-    },
-    props: {
-        value: { type: String, required: false, default: "" },
-        tooltipPlacement: { type: String, required: false, default: "left" },
-    },
-    computed: {
-        annotation: {
-            get() {
-                return this.value || "";
-            },
-            set(newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.$emit("input", newVal);
-                }
-            },
-        },
-    },
-};
-</script>
-
-<style lang="scss" scoped>
-.annotation >>> p {
-    position: relative;
-    font-style: italic;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-</style>
diff --git a/client/src/components/ClickToEdit.vue b/client/src/components/ClickToEdit.vue
index fa93662ec59b..e6c2b1283dc5 100644
--- a/client/src/components/ClickToEdit.vue
+++ b/client/src/components/ClickToEdit.vue
@@ -1,7 +1,6 @@
 <template>
-    <div class="clickToEdit" :class="{ empty: !value.length }">
+    <div class="click-to-edit" :class="{ empty: !value.length }">
         <component :is="tagName" v-if="!editing" class="m-0" @click="toggleEdit(true)">
-            <span class="editable"></span>
             <span>{{ displayValue }}</span>
             <slot name="tooltip" :editing="editing" :local-value="localValue"></slot>
         </component>
@@ -83,16 +82,9 @@ export default {
 @import "theme/blue.scss";
 @import "~scss/mixins.scss";
 
-.clickToEdit {
+.click-to-edit {
     position: relative;
-    &:hover .editable {
-        @include fontawesome($fa-var-edit);
-        position: absolute;
-        top: 0;
-        right: 0;
-        color: $brand-info;
-        font-size: 0.8rem;
-    }
+
     /* changes placeholder text, it's a brittle and ugly selector
     but bootstrap-vue doesn't give us much to work with */
     &.empty > p > span {
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index eb446332bfc9..e1e7b81eccb6 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -469,22 +469,6 @@ $fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free/webfonts/
         border: 1px solid lightgrey;
         border-width: 1px 0 1px 0;
     }
-    .element-drop-placeholder {
-        width: 60px;
-        height: 3px;
-        margin: 2px 0px 0px 14px;
-        background: black;
-        &:before {
-            @extend .fas;
-            float: left;
-            font-size: 120%;
-            margin: -9px 0px 0px -8px;
-            content: fa-content($fa-var-caret-right);
-        }
-        &:last-child {
-            margin-bottom: 8px;
-        }
-    }
     // ------------------------------------------------------------------------ footer
     .footer {
         .inputs-form-group > div {
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 2ef53352d818..f7786a0fce9e 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDoubleDown, faAngleDoubleUp, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
-library.add(faAngleDoubleDown, faAngleDoubleUp);
-
 interface Props {
     h1?: boolean;
     h2?: boolean;
@@ -17,14 +14,14 @@ interface Props {
     separator?: boolean;
     inline?: boolean;
     size?: "xl" | "lg" | "md" | "sm" | "text";
-    icon?: string | [string, string];
+    icon?: IconDefinition | null;
     truncate?: boolean;
     collapse?: "open" | "closed" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
     collapse: "none",
-    icon: "",
+    icon: null,
     size: "lg",
 });
 
@@ -85,8 +82,8 @@ const element = computed(() => {
         ]"
         @click="$emit('click')">
         <b-button v-if="collapsible" variant="link" size="sm">
-            <icon v-if="collapsed" fixed-width icon="angle-double-down" />
-            <icon v-else fixed-width icon="angle-double-up" />
+            <FontAwesomeIcon v-if="collapsed" fixed-width :icon="faAngleDoubleDown" />
+            <FontAwesomeIcon v-else fixed-width :icon="faAngleDoubleUp" />
         </b-button>
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
         <slot />
diff --git a/client/src/components/ConfigTemplates/CreateInstance.test.ts b/client/src/components/ConfigTemplates/CreateInstance.test.ts
index fe4e59ad4a59..811f21571896 100644
--- a/client/src/components/ConfigTemplates/CreateInstance.test.ts
+++ b/client/src/components/ConfigTemplates/CreateInstance.test.ts
@@ -2,31 +2,32 @@ import { shallowMount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
 import CreateInstance from "./CreateInstance.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const localVue = getLocalVue(true);
 
 describe("CreateInstance", () => {
     it("should render a loading message during loading", async () => {
-        const wrapper = shallowMount(CreateInstance, {
+        const wrapper = shallowMount(CreateInstance as any, {
             propsData: {
                 loading: true,
                 loadingMessage: "component loading...",
             },
             localVue,
         });
-        const loadingSpan = wrapper.findComponent({ name: "LoadingSpan" }).exists();
+        const loadingSpan = wrapper.findComponent(LoadingSpan).exists();
         expect(loadingSpan).toBeTruthy();
     });
 
     it("should hide a loading message after loading", async () => {
-        const wrapper = shallowMount(CreateInstance, {
+        const wrapper = shallowMount(CreateInstance as any, {
             propsData: {
                 loading: false,
                 loadingMessage: "component loading...",
             },
             localVue,
         });
-        const loadingSpan = wrapper.findComponent({ name: "LoadingSpan" }).exists();
+        const loadingSpan = wrapper.findComponent(LoadingSpan).exists();
         expect(loadingSpan).toBeFalsy();
     });
 });
diff --git a/client/src/components/ConfigTemplates/InstanceForm.test.ts b/client/src/components/ConfigTemplates/InstanceForm.test.ts
index 72b7578cf125..04c9be4f63cb 100644
--- a/client/src/components/ConfigTemplates/InstanceForm.test.ts
+++ b/client/src/components/ConfigTemplates/InstanceForm.test.ts
@@ -4,6 +4,7 @@ import { getLocalVue } from "tests/jest/helpers";
 import { type FormEntry } from "./formUtil";
 
 import InstanceForm from "./InstanceForm.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const localVue = getLocalVue(true);
 
@@ -12,7 +13,7 @@ const SUBMIT_TITLE = "Submit the form!";
 
 describe("InstanceForm", () => {
     it("should render a loading message and not submit button if inputs is null", async () => {
-        const wrapper = shallowMount(InstanceForm, {
+        const wrapper = shallowMount(InstanceForm as any, {
             propsData: {
                 title: "MY FORM",
                 inputs: null,
@@ -22,13 +23,13 @@ describe("InstanceForm", () => {
             },
             localVue,
         });
-        const loadingSpan = wrapper.findComponent({ name: "LoadingSpan" }).exists();
+        const loadingSpan = wrapper.findComponent(LoadingSpan).exists();
         expect(loadingSpan).toBeTruthy();
         expect(wrapper.find("#submit").exists()).toBeFalsy();
     });
 
     it("should hide a loading message after loading", async () => {
-        const wrapper = shallowMount(InstanceForm, {
+        const wrapper = shallowMount(InstanceForm as any, {
             propsData: {
                 title: "MY FORM",
                 inputs: inputs,
@@ -38,7 +39,7 @@ describe("InstanceForm", () => {
             },
             localVue,
         });
-        const loadingSpan = wrapper.findComponent({ name: "LoadingSpan" }).exists();
+        const loadingSpan = wrapper.findComponent(LoadingSpan).exists();
         expect(loadingSpan).toBeFalsy();
         expect(wrapper.find("#submit").exists()).toBeTruthy();
         expect(wrapper.find("#submit").text()).toEqual(SUBMIT_TITLE);
diff --git a/client/src/components/IconCard.vue b/client/src/components/IconCard.vue
index 7b4b1277dd33..58f3f34eb2b9 100644
--- a/client/src/components/IconCard.vue
+++ b/client/src/components/IconCard.vue
@@ -1,46 +1,60 @@
+<script setup lang="ts">
+/** A generic Card, used as a template, that displays an action button,
+ * an icon (font-awesome), along with a title and description.
+ * Clicking the button emits an "onButtonClick" event. */
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import type { IconDefinition } from "font-awesome-6";
+import type { PropType } from "vue";
+
+type Sizes = "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | `${number}x`;
+
+const props = defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    description: {
+        type: String,
+        required: true,
+    },
+    icon: {
+        type: Object as PropType<IconDefinition>,
+        required: true,
+    },
+    iconSize: {
+        type: String as PropType<Sizes>,
+        default: "1x",
+    },
+    buttonText: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits<{
+    (e: "onButtonClick"): void;
+}>();
+
+function onButtonClick() {
+    emit("onButtonClick");
+}
+</script>
+
 <template>
-    <b-card :title="title" class="mx-4 icon-card">
+    <b-card :title="props.title" class="mx-4 icon-card">
         <b-container class="p-0">
             <b-row>
-                <b-col>{{ description }}</b-col>
-                <b-col cols="auto"><i :class="icon"></i></b-col>
+                <b-col>{{ props.description }}</b-col>
+                <b-col cols="auto">
+                    <FontAwesomeIcon :icon="props.icon" :size="props.iconSize" />
+                </b-col>
             </b-row>
         </b-container>
-        <b-button variant="primary" @click="onButtonClick">{{ buttonText }}</b-button>
+        <b-button variant="primary" @click="onButtonClick">{{ props.buttonText }}</b-button>
     </b-card>
 </template>
 
-<script>
-/** A generic Card, used as a template, that displays an action button,
- * an icon (font-awesome), along with a title and description.
- * Clicking the button emits an "onButtonClick" event. */
-export default {
-    props: {
-        title: {
-            type: String,
-            required: true,
-        },
-        description: {
-            type: String,
-            required: true,
-        },
-        icon: {
-            type: String,
-            required: true,
-        },
-        buttonText: {
-            type: String,
-            required: true,
-        },
-    },
-    methods: {
-        onButtonClick() {
-            this.$emit("onButtonClick");
-        },
-    },
-};
-</script>
-
 <style scoped>
 .icon-card {
     max-width: 500px;
diff --git a/client/src/components/LoadingSpan.vue b/client/src/components/LoadingSpan.vue
index 527dc6c39e85..c1d723a9b474 100644
--- a/client/src/components/LoadingSpan.vue
+++ b/client/src/components/LoadingSpan.vue
@@ -1,34 +1,30 @@
+<script setup lang="ts">
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+const props = defineProps({
+    classes: {
+        type: String,
+        required: false,
+        default: null,
+    },
+    message: {
+        type: String,
+        default: "Loading",
+    },
+    spinnerOnly: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+});
+</script>
+
 <template>
     <span>
-        <span :class="spinnerClasses" title="loading"></span>
-        <span v-if="!spinnerOnly" class="loading-message" data-description="loading message">
-            {{ message }}.<span class="blinking">..</span>
+        <FontAwesomeIcon :class="props.classes" :icon="faSpinner" spin title="loading" />
+        <span v-if="!props.spinnerOnly" class="loading-message" data-description="loading message">
+            {{ props.message }}.<span class="blinking">..</span>
         </span>
     </span>
 </template>
-<script>
-export default {
-    name: "LoadingSpan",
-    props: {
-        classes: {
-            type: String,
-            required: false,
-            default: null,
-        },
-        message: {
-            type: String,
-            default: "Loading",
-        },
-        spinnerOnly: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-    },
-    computed: {
-        spinnerClasses() {
-            return ["loading-icon", "fa", "fa-spinner", "fa-spin"].concat(this.classes ? this.classes.split(" ") : []);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/MarkdownDialog.vue b/client/src/components/Markdown/MarkdownDialog.vue
index 2d421ba8e64e..e45733fab453 100644
--- a/client/src/components/Markdown/MarkdownDialog.vue
+++ b/client/src/components/Markdown/MarkdownDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { faSitemap } from "@fortawesome/free-solid-svg-icons";
 import BootstrapVue from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import Vue, { computed, ref } from "vue";
@@ -287,7 +288,7 @@ if (props.argumentType == "workflow_id") {
             v-else-if="workflowShow"
             :get-data="getWorkflows"
             title="Workflow"
-            leaf-icon="fa fa-sitemap fa-rotate-270"
+            :leaf-icon="faSitemap"
             label-key="name"
             @onOk="onWorkflow"
             @onCancel="onCancel" />
diff --git a/client/src/components/SelectionDialog/BasicSelectionDialog.vue b/client/src/components/SelectionDialog/BasicSelectionDialog.vue
index 9697de20104b..0b4cc6180579 100644
--- a/client/src/components/SelectionDialog/BasicSelectionDialog.vue
+++ b/client/src/components/SelectionDialog/BasicSelectionDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { IconDefinition } from "font-awesome-6";
 import { computed, onMounted, type Ref, ref } from "vue";
 
 import { type SelectionItem } from "@/components/SelectionDialog/selectionTypes";
@@ -11,7 +12,7 @@ interface Props {
     getData: () => Promise<object[]>;
     isEncoded?: boolean;
     labelKey?: string;
-    leafIcon?: string;
+    leafIcon?: IconDefinition | null;
     timeKey?: string;
     title: string;
 }
@@ -20,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
     detailsKey: "",
     isEncoded: false,
     labelKey: "id",
-    leafIcon: "",
+    leafIcon: null,
     timeKey: "update_time",
 });
 
diff --git a/client/src/components/SelectionDialog/DatasetCollectionDialog.vue b/client/src/components/SelectionDialog/DatasetCollectionDialog.vue
index a0e079c964a9..4bb252448b93 100644
--- a/client/src/components/SelectionDialog/DatasetCollectionDialog.vue
+++ b/client/src/components/SelectionDialog/DatasetCollectionDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import axios from "axios";
 import { onMounted, ref } from "vue";
 
@@ -81,7 +82,7 @@ onMounted(() => {
         :options-show="optionsShow"
         :modal-show="modalShow"
         :modal-static="modalStatic"
-        leaf-icon="fa fa-folder"
+        :leaf-icon="faFolder"
         :items="items"
         @onCancel="onCancel"
         @onClick="onClick" />
diff --git a/client/src/components/SelectionDialog/SelectionDialog.vue b/client/src/components/SelectionDialog/SelectionDialog.vue
index b05d8d1ee08c..c68807c9f0b5 100644
--- a/client/src/components/SelectionDialog/SelectionDialog.vue
+++ b/client/src/components/SelectionDialog/SelectionDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type IconDefinition, library } 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 { faCaretLeft, faCheck, faFileAlt, faFolder, faSpinner, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BLink, BModal, BPagination, BSpinner, BTable } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
@@ -32,7 +32,7 @@ interface Props {
     itemsProvider?: ItemsProvider;
     providerUrl?: string;
     totalItems?: number;
-    leafIcon?: string;
+    leafIcon?: IconDefinition | null;
     folderIcon?: IconDefinition;
     modalShow?: boolean;
     modalStatic?: boolean;
@@ -58,7 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
     itemsProvider: undefined,
     providerUrl: undefined,
     totalItems: 0,
-    leafIcon: "fa fa-file-o",
+    leafIcon: () => faFileAlt,
     folderIcon: () => faFolder,
     modalShow: true,
     modalStatic: false,
@@ -232,8 +232,11 @@ watch(
                                 :title="`label-${data.item.url}`"><code>{{ data.value ? data.value : "-" }}</code></pre>
                             <span v-else>
                                 <div v-if="data.item.isLeaf">
-                                    <i :class="leafIcon" />
-                                    <span :title="`label-${data.item.url}`">{{ data.value ? data.value : "-" }}</span>
+                                    <FontAwesomeIcon :icon="props.leafIcon">
+                                        <span :title="`label-${data.item.url}`">{{
+                                            data.value ? data.value : "-"
+                                        }}</span>
+                                    </FontAwesomeIcon>
                                 </div>
                                 <div v-else @click.stop="emit('onOpen', data.item)">
                                     <FontAwesomeIcon :icon="props.folderIcon" />
diff --git a/client/src/components/User/DiskUsage/StorageDashboard.vue b/client/src/components/User/DiskUsage/StorageDashboard.vue
index 9cd672a8550e..99a43691d525 100644
--- a/client/src/components/User/DiskUsage/StorageDashboard.vue
+++ b/client/src/components/User/DiskUsage/StorageDashboard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { faBroom, faChartPie, faHdd } from "font-awesome-6";
 import { reactive } from "vue";
 import { useRouter } from "vue-router/composables";
 
@@ -17,7 +18,7 @@ const texts = reactive({
         description: localize(
             "Find out what is eating up your space and learn how to easily and safely free up some of it."
         ),
-        icon: "fas fa-broom fa-6x",
+        icon: faBroom,
         buttonText: localize("Free up disk usage"),
     },
     explore_by_history: {
@@ -25,7 +26,7 @@ const texts = reactive({
         description: localize(
             "Want to know what histories or datasets take up the most space in your account? Here you can explore your disk usage in a visual way by history."
         ),
-        icon: "fas fa-chart-pie fa-6x",
+        icon: faChartPie,
         buttonText: localize("Explore now"),
     },
     explore_by_objectstore: {
@@ -33,7 +34,7 @@ const texts = reactive({
         description: localize(
             "Want to know how the space in your account is being distributed across storage locations? Here you can explore your disk usage in a visual way by where it is physically stored."
         ),
-        icon: "fas fa-hdd fa-6x",
+        icon: faHdd,
         buttonText: localize("Explore now"),
     },
 });
@@ -66,6 +67,7 @@ function goToObjectStoresOverview() {
             :title="texts.freeSpace.title"
             :description="texts.freeSpace.description"
             :icon="texts.freeSpace.icon"
+            icon-size="6x"
             :button-text="texts.freeSpace.buttonText"
             @onButtonClick="goToStorageManager" />
 
@@ -75,6 +77,7 @@ function goToObjectStoresOverview() {
             :title="texts.explore_by_history.title"
             :description="texts.explore_by_history.description"
             :icon="texts.explore_by_history.icon"
+            icon-size="6x"
             :button-text="texts.explore_by_history.buttonText"
             @onButtonClick="goToHistoriesOverview" />
 
@@ -84,6 +87,7 @@ function goToObjectStoresOverview() {
             :title="texts.explore_by_objectstore.title"
             :description="texts.explore_by_objectstore.description"
             :icon="texts.explore_by_objectstore.icon"
+            icon-size="6x"
             :button-text="texts.explore_by_objectstore.buttonText"
             @onButtonClick="goToObjectStoresOverview" />
     </div>
diff --git a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
index 0165358c79e7..8e25e74284a3 100644
--- a/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
+++ b/client/src/components/User/ExternalIdentities/ExternalIdentities.vue
@@ -281,65 +281,6 @@ export default {
     }
 }
 
-// Single list item
-
-.external-id-key {
-    header hgroup {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-        user-select: none;
-
-        > * {
-            margin-bottom: 0;
-        }
-    }
-
-    form {
-        @extend .my-3;
-        @extend .pt-3;
-        // removes weird double arrows on select
-        .custom-select {
-            background: none;
-        }
-        // Allow side-by-side labels to work
-        .form-row {
-            display: flex;
-            input,
-            select {
-                max-width: none;
-            }
-            label {
-                font-weight: 400;
-            }
-        }
-
-        // button list at bottom of form
-        footer {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-end;
-            @extend .pt-3;
-
-            button:not(:first-child) {
-                @extend .ml-1;
-            }
-        }
-    }
-
-    // icon menu
-    .operations {
-        list-style-type: none;
-
-        .delete a,
-        button {
-            @include fontawesome($fa-var-times);
-        }
-    }
-}
-
 // Transitions
 .fade-enter-active,
 .fade-leave-active {
diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index 695c5de0b58b..a591307b1756 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -32,44 +32,44 @@
         <UserPreferencesElement
             v-if="isConfigLoaded && !config.single_user"
             id="edit-preferences-permissions"
-            icon="fa-users"
+            :icon="faUsers"
             title="Set Dataset Permissions for New Histories"
             description="Grant others default access to newly created histories. Changes made here will only affect histories created after these settings have been stored."
             to="/user/permissions" />
         <UserPreferencesElement
             id="edit-preferences-api-key"
-            icon="fa-key"
+            :icon="faKey"
             title="Manage API Key"
             description="Access your current API key or create a new one."
             to="/user/api_key" />
         <UserPreferencesElement
             id="edit-preferences-notifications"
-            icon="fa-bell"
+            :icon="faBell"
             title="Manage Notifications"
             description="Manage your notification settings."
             to="/user/notifications/preferences" />
         <UserPreferencesElement
             id="edit-preferences-cloud-auth"
-            icon="fa-cloud"
+            :icon="faCloud"
             title="Manage Cloud Authorization"
             description="Add or modify the configuration that grants Galaxy to access your cloud-based resources."
             to="/user/cloud_auth" />
         <UserPreferencesElement
             v-if="isConfigLoaded && config.enable_oidc && !config.fixed_delegated_auth"
             id="manage-third-party-identities"
-            icon="fa-id-card-o"
+            :icon="faIdCardAlt"
             title="Manage Third-Party Identities"
             description="Connect or disconnect access to your third-party identities."
             to="/user/external_ids" />
         <UserPreferencesElement
             id="edit-preferences-custom-builds"
-            icon="fa-cubes"
+            :icon="faCubes"
             title="Manage Custom Builds"
             description="Add or remove custom builds using history datasets."
             to="/custom_builds" />
         <UserPreferencesElement
             v-if="hasThemes"
-            icon="fa-palette"
+            :icon="faPalette"
             title="Pick a Color Theme"
             description="Click here to change the user interface color theme."
             badge="New!"
@@ -81,7 +81,7 @@
         <UserPreferencesElement
             v-if="isConfigLoaded && !config.single_user"
             id="edit-preferences-make-data-private"
-            icon="fa-lock"
+            :icon="faLock"
             title="Make All Data Private"
             description="Click here to make all data private."
             @click="makeDataPrivate" />
@@ -96,7 +96,7 @@
             v-if="hasObjectStoreTemplates"
             id="manage-object-stores"
             class="manage-object-stores"
-            icon="fa-hdd"
+            :icon="faHdd"
             title="Manage Your Storage Locations"
             description="Add, remove, or update your personally configured storage locations."
             to="/object_store_instances/index" />
@@ -104,7 +104,7 @@
             v-if="hasFileSourceTemplates"
             id="manage-file-sources"
             class="manage-file-sources"
-            icon="fa-file"
+            :icon="faFile"
             title="Manage Your Remote File Sources"
             description="Add, remove, or update your personally configured location to find files from and write files to."
             to="/file_source_instances/index" />
@@ -116,7 +116,7 @@
         <UserPreferencesElement
             v-if="hasLogout"
             id="edit-preferences-sign-out"
-            icon="fa-sign-out"
+            :icon="faSignOutAlt"
             title="Sign Out"
             description="Click here to sign out of all sessions."
             @click="showLogoutModal = true" />
@@ -140,10 +140,22 @@
 </template>
 
 <script>
+import {
+    faBell,
+    faCloud,
+    faCubes,
+    faFile,
+    faHdd,
+    faIdCardAlt,
+    faKey,
+    faLock,
+    faPalette,
+    faSignOutAlt,
+    faUsers,
+} from "@fortawesome/free-solid-svg-icons";
 import { getGalaxyInstance } from "app";
 import axios from "axios";
 import BootstrapVue from "bootstrap-vue";
-import { getUserPreferencesModel } from "components/User/UserPreferencesModel";
 import { mapActions, mapState } from "pinia";
 import _l from "utils/localization";
 import { userLogoutAll } from "utils/logout";
@@ -151,6 +163,7 @@ import QueryStringParsing from "utils/query-string-parsing";
 import { withPrefix } from "utils/redirect";
 import Vue from "vue";
 
+import { getUserPreferencesModel } from "@/components/User/UserPreferencesModel";
 import { useConfig } from "@/composables/config";
 import { useFileSourceTemplatesStore } from "@/stores/fileSourceTemplatesStore";
 import { useObjectStoreTemplatesStore } from "@/stores/objectStoreTemplatesStore";
@@ -197,6 +210,17 @@ export default {
             showLogoutModal: false,
             showDataPrivateModal: false,
             toggleTheme: false,
+            faBell,
+            faCloud,
+            faCubes,
+            faFile,
+            faHdd,
+            faIdCardAlt,
+            faKey,
+            faLock,
+            faPalette,
+            faSignOutAlt,
+            faUsers,
         };
     },
     computed: {
diff --git a/client/src/components/User/UserPreferencesElement.vue b/client/src/components/User/UserPreferencesElement.vue
index 4ebe4a8abd45..727447a822bb 100644
--- a/client/src/components/User/UserPreferencesElement.vue
+++ b/client/src/components/User/UserPreferencesElement.vue
@@ -1,14 +1,17 @@
-<script setup>
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BRow } from "bootstrap-vue";
+import { faGear, type IconDefinition } from "font-awesome-6";
+import type { PropType } from "vue";
 
-defineProps({
+const props = defineProps({
     id: {
         type: String,
         default: null,
     },
     icon: {
-        type: String,
-        default: "fa-gear",
+        type: Object as PropType<IconDefinition>,
+        default: () => faGear,
     },
     title: {
         type: String,
@@ -27,31 +30,38 @@ defineProps({
         default: null,
     },
 });
+
+const emit = defineEmits<{
+    (e: "click"): void;
+}>();
 </script>
+
 <template>
     <BRow class="ml-3 mb-1">
-        <i :class="['pref-icon pt-1 fa fa-lg', icon]" />
+        <FontAwesomeIcon :icon="props.icon" size="lg" class="pt-1 pref-icon" />
         <div class="pref-content pr-1">
-            <b-badge v-if="!!badge" variant="danger">
-                {{ badge }}
+            <b-badge v-if="Boolean(props.badge)" variant="danger">
+                {{ props.badge }}
             </b-badge>
-            <router-link v-if="to" :id="id" :to="to">
-                <b v-localize>{{ title }}</b>
+            <router-link v-if="to" :id="props.id" :to="props.to">
+                <b v-localize>{{ props.title }}</b>
             </router-link>
-            <a v-else :id="id" href="#" @click="$emit('click')">
-                <b v-localize>{{ title }}</b>
+            <a v-else :id="props.id" href="#" @click="emit('click')">
+                <b v-localize>{{ props.title }}</b>
             </a>
             <div class="form-text text-muted">
-                {{ description }}
+                {{ props.description }}
             </div>
             <slot />
         </div>
     </BRow>
 </template>
+
 <style scoped>
 .pref-content {
     width: calc(100% - 3rem);
 }
+
 .pref-icon {
     width: 3rem;
 }
diff --git a/client/src/components/User/UserPreferencesModel.js b/client/src/components/User/UserPreferencesModel.js
index a5a05dd3ad6d..fe4087222855 100644
--- a/client/src/components/User/UserPreferencesModel.js
+++ b/client/src/components/User/UserPreferencesModel.js
@@ -1,3 +1,4 @@
+import { faFilter, faUnlockAlt, faUser } from "@fortawesome/free-solid-svg-icons";
 import { getGalaxyInstance } from "app";
 import _l from "utils/localization";
 
@@ -14,14 +15,14 @@ export const getUserPreferencesModel = (user_id) => {
                     ? _l("Edit your email, addresses and custom parameters or change your public name.")
                     : _l("Edit your custom parameters."),
             url: `/api/users/${user_id}/information/inputs`,
-            icon: "fa-user",
+            icon: faUser,
             redirect: "/user",
         },
         password: {
             title: _l("Change Password"),
             id: "edit-preferences-password",
             description: _l("Allows you to change your login credentials."),
-            icon: "fa-unlock-alt",
+            icon: faUnlockAlt,
             url: `/api/users/${user_id}/password/inputs`,
             submit_title: "Save Password",
             redirect: "/user",
@@ -32,7 +33,7 @@ export const getUserPreferencesModel = (user_id) => {
             id: "edit-preferences-toolbox-filters",
             description: _l("Customize your Toolbox by displaying or omitting sets of Tools."),
             url: `/api/users/${user_id}/toolbox_filters/inputs`,
-            icon: "fa-filter",
+            icon: faFilter,
             submitTitle: "Save Filters",
             redirect: "/user",
             disabled: !config.has_user_tool_filters,
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
index 2240a3d8c315..014633aba06b 100644
--- a/client/src/components/Workflow/Invocation/InvocationScrollList.vue
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEye } from "@fortawesome/free-regular-svg-icons";
-import { faArrowDown, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faHdd, faInfoCircle, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
 import { BAlert, BBadge, BButton, BListGroup, BListGroupItem } from "bootstrap-vue";
@@ -34,8 +33,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["invocation-clicked"]);
 
-library.add(faEye, faArrowDown, faInfoCircle);
-
 const stateClasses: Record<string, string> = {
     ready: "waiting",
     scheduled: "ok",
@@ -201,12 +198,12 @@ function workflowName(workflowId: string) {
                         :active="invocation.id === currentItemId"
                         @click="() => cardClicked(invocation)">
                         <div class="overflow-auto w-100">
-                            <Heading bold size="text" icon="fa-sitemap">
+                            <Heading bold size="text" :icon="faSitemap">
                                 <span class="truncate-n-lines three-lines">
                                     {{ workflowName(invocation.workflow_id) }}
                                 </span>
                             </Heading>
-                            <Heading size="text" icon="fa-hdd">
+                            <Heading size="text" :icon="faHdd">
                                 <small class="text-muted truncate-n-lines two-lines">
                                     {{ historyName(invocation.history_id) }}
                                 </small>
diff --git a/client/src/components/admin/Home.vue b/client/src/components/admin/Home.vue
index e4d1ad8c2bb2..c0401f223e8c 100644
--- a/client/src/components/admin/Home.vue
+++ b/client/src/components/admin/Home.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import { faServer, faUser, faWrench } from "@fortawesome/free-solid-svg-icons";
+
+import Heading from "components/Common/Heading.vue";
+
+const props = defineProps({
+    isToolshedInstalled: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>
+
 <template>
     <div>
         <h1>Administration</h1>
@@ -9,7 +22,7 @@
             keep your Galaxy in best shape.
         </p>
 
-        <Heading h2 icon="fa-server" size="md">Server</Heading>
+        <Heading h2 :icon="faServer" size="md">Server</Heading>
         <ul>
             <li>
                 <strong>
@@ -51,7 +64,7 @@
             </li>
         </ul>
 
-        <Heading h2 icon="fa-user" size="md">User Management</Heading>
+        <Heading h2 :icon="faUser" size="md">User Management</Heading>
         <ul>
             <li>
                 <strong>
@@ -91,7 +104,7 @@
             </li>
         </ul>
 
-        <Heading h2 icon="fa-wrench" size="md">Tool Management</Heading>
+        <Heading h2 :icon="faWrench" size="md">Tool Management</Heading>
         <ul>
             <li>
                 <strong>
@@ -99,7 +112,7 @@
                 </strong>
                 - Manage HTML rendering for installed tools' output datasets.
             </li>
-            <li v-if="isToolshedInstalled">
+            <li v-if="props.isToolshedInstalled">
                 <strong>
                     <router-link to="/admin/toolshed">Install and Uninstall</router-link>
                 </strong>
@@ -117,22 +130,3 @@
         </ul>
     </div>
 </template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faServer, faUser, faWrench } from "@fortawesome/free-solid-svg-icons";
-
-import Heading from "components/Common/Heading.vue";
-
-library.add(faServer, faUser, faWrench);
-
-export default {
-    components: { Heading },
-    props: {
-        isToolshedInstalled: {
-            type: Boolean,
-            default: false,
-        },
-    },
-};
-</script>
diff --git a/client/src/style/scss/dataset.scss b/client/src/style/scss/dataset.scss
index ca444bd3bdab..e055dd31b989 100644
--- a/client/src/style/scss/dataset.scss
+++ b/client/src/style/scss/dataset.scss
@@ -3,90 +3,6 @@
 @import "~@fortawesome/fontawesome-free/scss/_variables";
 
 // ---------------------------------------------------------------------------- dataset states
-//.dataset .state-icon {
-
-.state-icon {
-    @extend .fa;
-    display: inline-block;
-    margin-right: 4px;
-    vertical-align: middle;
-    width: 14px;
-    height: 14px;
-    line-height: 14px;
-    text-align: center;
-    font-size: 14px;
-}
-
-.state-icon-running {
-    @extend .fa-spin;
-    @extend .fa-spinner;
-    filter: blur(0);
-}
-
-.state-icon-upload {
-    overflow: hidden;
-
-    &:before {
-        display: inline-block;
-        -webkit-animation: eclipse 2s infinite linear;
-        -moz-animation: eclipse 2s infinite linear;
-        -o-animation: eclipse 2s infinite linear;
-        animation: eclipse 2s infinite linear;
-
-        @-moz-keyframes eclipse {
-            0% {
-                -moz-transform: translate(0px, 16px);
-            }
-            100% {
-                -moz-transform: translate(0px, -16px);
-            }
-        }
-        @-webkit-keyframes eclipse {
-            0% {
-                -webkit-transform: translate(0px, 16px);
-            }
-            100% {
-                -webkit-transform: translate(0px, -16px);
-            }
-        }
-        @-o-keyframes eclipse {
-            0% {
-                -o-transform: translate(0px, 16px);
-            }
-            100% {
-                -o-transform: translate(0px, -16px);
-            }
-        }
-        @-ms-keyframes eclipse {
-            0% {
-                -ms-transform: translate(0px, 16px);
-            }
-            100% {
-                -ms-transform: translate(0px, -16px);
-            }
-        }
-        @keyframes eclipse {
-            0% {
-                transform: translate(0px, 16px);
-            }
-            100% {
-                transform: translate(0px, -16px);
-            }
-        }
-        content: fa-content($fa-var-arrow-up);
-    }
-}
-
-.state-icon-error {
-    background-color: white;
-    border-radius: 8px;
-    &:before {
-        font-size: 20px;
-        line-height: 16px;
-        color: red;
-        content: fa-content($fa-var-times-circle);
-    }
-}
 
 // ............................................................................ state bgs and icons
 .has-job-state-mixin {
@@ -94,59 +10,32 @@
     &.state-ok,
     &.state-failed_metadata {
         background: $state-success-bg;
-        .state-icon {
-            display: none;
-        }
     }
 
     &.state-error,
     &.state-empty {
         background: $state-danger-bg;
-        .state-icon {
-            @extend .state-icon-error;
-        }
     }
 
     &.state-upload {
         background: $state-info-bg;
-        .state-icon {
-            @extend .state-icon-upload;
-        }
     }
 
     &.state-queued {
         background: $state-default-bg;
-        .state-icon {
-            &:before {
-                content: fa-content($fa-var-clock);
-            }
-        }
     }
 
     &.state-running,
     &.state-setting_metadata {
         background: $state-running-bg;
-        .state-icon {
-            @extend .state-icon-running;
-        }
     }
 
     &.state-paused {
         background: $state-info-bg;
-        .state-icon {
-            &:before {
-                content: fa-content($fa-var-pause);
-            }
-        }
     }
 
     &.state-discarded {
         background: $state-default-bg;
-        .state-icon {
-            &:before {
-                content: fa-content($fa-var-trash);
-            }
-        }
     }
 
     &.state-noPermission {
@@ -154,28 +43,14 @@
         filter: alpha(opacity=60);
         -moz-opacity: 0.6;
         opacity: 0.6;
-        .state-icon {
-            font-size: 20px;
-            &:before {
-                content: fa-content($fa-var-lock);
-            }
-        }
     }
 
     &.state-new {
         background: $state-default-bg;
-        .state-icon {
-            &:before {
-                content: fa-content($fa-var-clock);
-            }
-        }
     }
 
     &.state-loading {
         background: $state-default-bg;
-        .state-icon {
-            @extend .state-icon-running;
-        }
     }
 }
 
diff --git a/client/src/utils/typedIcons.ts b/client/src/utils/typedIcons.ts
new file mode 100644
index 000000000000..828645331fd4
--- /dev/null
+++ b/client/src/utils/typedIcons.ts
@@ -0,0 +1,7 @@
+import type { IconDefinition } from "font-awesome-6";
+
+// typecasts to make icon types compatible with font awesome icon component
+
+export const galaxyLogo = ["gxd", "galaxyLogo"] as unknown as IconDefinition;
+export const textSmaller = ["gxd", "textSmaller"] as unknown as IconDefinition;
+export const textLarger = ["gxd", "textLarger"] as unknown as IconDefinition;