diff --git a/client/src/components/Workflow/icons.js b/client/src/components/Workflow/icons.js
index 69401bcd581f..fda447092b49 100644
--- a/client/src/components/Workflow/icons.js
+++ b/client/src/components/Workflow/icons.js
@@ -1,8 +1,14 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faFile } from "@fortawesome/free-regular-svg-icons";
+import { faFolderOpen, faPause, faPencilAlt, faSitemap, faWrench } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faWrench, faFile, faSitemap, faPencilAlt, faPause, faFolderOpen);
+
 export default {
     tool: "fa-wrench",
-    data_input: "fa-file-o",
-    data_collection_input: "fa-folder-o",
+    data_input: "fa-file-o fa-file", // fa-file-o for older FontAwesome, fa-file is the only thing I could find newer font awesome
+    data_collection_input: "fa-folder-o fa-folder-open",
     subworkflow: "fa-sitemap fa-rotate-270",
-    parameter_input: "fa-pencil",
+    parameter_input: "fa-pencil-alt", // fa-pencil for older FontAwesome, fa-pencil-alt for newer
     pause: "fa-pause",
 };
diff --git a/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue b/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
index 08c64b37faf6..7b103f3d27cd 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowStepIcon.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
 import WorkflowIcons from "@/components/Workflow/icons";
@@ -12,11 +13,8 @@ const props = defineProps<WorkflowStepIconProps>();
 const stepIcon = computed(() => {
     return WorkflowIcons[props.stepType];
 });
-const cssClasses = computed(() => {
-    return ["fa", "mr-1", stepIcon.value];
-});
 </script>
 
 <template>
-    <i :class="cssClasses"></i>
+    <FontAwesomeIcon class="mr-1" :icon="stepIcon" />
 </template>