diff --git a/src/components/Badge/Badge.stories.js b/src/components/Badge/Badge.stories.js
index 4cbfd8215..3de2a124e 100644
--- a/src/components/Badge/Badge.stories.js
+++ b/src/components/Badge/Badge.stories.js
@@ -79,7 +79,7 @@ export const Comments = {
 		},
 		template: `
 			<Badge v-bind="args" >			
-				<Icon icon="comment-o" :inline="true" />{{args.slot}}
+				<Icon icon="Comment" class="h-3 w-3 me-1" :inline="true" />{{args.slot}}
 			</Badge>`,
 	}),
 };
diff --git a/src/components/ButtonRow/ButtonRow.stories.js b/src/components/ButtonRow/ButtonRow.stories.js
index 404357064..d07ccc9b5 100644
--- a/src/components/ButtonRow/ButtonRow.stories.js
+++ b/src/components/ButtonRow/ButtonRow.stories.js
@@ -14,7 +14,7 @@ export const Default = {
 			<ButtonRow v-bind="args">
 				<template #end>
 					<PkpButton :is-link="true">
-						<Icon icon="long-arrow-left" :inline="true" />
+						<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 						Back
 					</PkpButton>
 				</template>
diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index 0c740dbae..8007ac953 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -70,7 +70,7 @@
 									class="-linkButton composer__templates__moreSearchResults"
 									@click="showSearchResultCount = searchResults.length"
 								>
-									<Icon icon="plus-circle" :inline="true" />
+									<Icon icon="Add" class="h-3 w-3" :inline="true" />
 									{{
 										moreSearchResultsLabel.replace(
 											'{$number}',
@@ -241,10 +241,10 @@
 								/>
 								{{ attachment.name }}
 								<button
-									class="composer__attachment__remove"
+									class="composer__attachment__remove text-negative hover:text-on-dark"
 									@click="removeAttachment(i)"
 								>
-									<Icon icon="times" />
+									<Icon icon="Cancel" class="h-3 w-3" />
 									<span class="-screenReader">
 										{{ removeItemLabel.replace('{$item}', attachment.name) }}
 									</span>
@@ -785,7 +785,7 @@ export default {
 				!!attachment.documentType &&
 				!!pkp.documentTypeIcons[attachment.documentType]
 				? pkp.documentTypeIcons[attachment.documentType]
-				: 'file-o';
+				: 'DefaultDocument';
 		},
 
 		/**
@@ -1157,14 +1157,6 @@ export default {
 	border-bottom-right-radius: 1.2em;
 	color: @no;
 
-	.fa {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		margin-left: -1px;
-	}
-
 	&:hover,
 	&:focus {
 		outline: 0;
diff --git a/src/components/Container/ManageEmailsPage.stories.js b/src/components/Container/ManageEmailsPage.stories.js
index 761897334..86058ca38 100644
--- a/src/components/Container/ManageEmailsPage.stories.js
+++ b/src/components/Container/ManageEmailsPage.stories.js
@@ -51,7 +51,7 @@ const ManageEmailsPageWithDataAndTemplate = {
 			<template #sidebar>
 				<PkpHeader>
 					<h2>
-						<Icon icon="filter" :inline="true" />
+						<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 						Filters
 					</h2>
 				</PkpHeader>
diff --git a/src/components/Container/Page.stories.js b/src/components/Container/Page.stories.js
index a143ec807..aa3118078 100644
--- a/src/components/Container/Page.stories.js
+++ b/src/components/Container/Page.stories.js
@@ -2,6 +2,7 @@ import {computed} from 'vue';
 import Page from './Page.vue';
 import Dropdown from '@/components/Dropdown/Dropdown.vue';
 import SideNav from '@/components/SideNav/SideNav.vue';
+import InitialsAvatar from '@/components/InitialsAvatar/InitialsAvatar.vue';
 import PageMock from '@/mocks/page';
 
 export default {
@@ -11,7 +12,7 @@ export default {
 
 export const Default = {
 	render: (args) => ({
-		components: {Page, Dropdown, SideNav},
+		components: {Page, Dropdown, SideNav, InitialsAvatar},
 		setup() {
 			const classes = computed(() => {
 				let _classes = [];
@@ -35,7 +36,7 @@ export const Default = {
 				<header class="app__header" role="banner">
 					<Dropdown v-if="contexts.length" class="app__headerAction app__contexts">
 						<template #button>
-							<Icon icon="sitemap" />
+							<Icon icon="Sitemap" class="h-7 w-7" />
 							<span class="-screenReader">Journals</span>
 						</template>
 						<ul>
@@ -53,7 +54,7 @@ export const Default = {
 								ref="tasksButton"
 								@click="alert('Opens the tasks grid in a modal')"
 							>
-								<Icon icon="bell-o"></Icon>
+								<Icon icon="Notifications" class="h-7 w-7"></Icon>
 								<span class="-screenReader">Tasks</span>
 								<span v-if="unreadTasksCount" class="app__tasksCount">
 									{{ unreadTasksCount }}
@@ -62,12 +63,8 @@ export const Default = {
 						</div>
 						<Dropdown class="app__headerAction app__userNav">
 							<template #button>
-								<Icon icon="user-circle-o" />
-								<Icon
-									v-if="isLoggedInAs"
-									icon="user-circle"
-									class="app__userNav__isLoggedInAsWarning"
-								/>
+								<InitialsAvatar :is-secondary="true" given-name="Test" family-name="User"></InitialsAvatar>
+								<Icon v-if="isLoggedInAs" icon="User" class="absolute right-2 top-2 text-on-dark bg-negative rounded-full h-5 w-5"></Icon>
 								<span class="-screenReader">Options for {{ currentUsername }}</span>
 							</template>
 							<div v-if="isLoggedInAs" class="pkpDropdown__section">
@@ -96,7 +93,8 @@ export const Default = {
 										<a :href="locale.key" class="pkpDropdown__action">
 											<Icon
 												v-if="locale.key === 'en'"
-												icon="check"
+												icon="Complete"
+												class="h-5 w-5"
 												:inline="true"
 											/>
 											{{ locale.name }}
diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
index ff17f0a50..719c8cd97 100644
--- a/src/components/Container/Page.vue
+++ b/src/components/Container/Page.vue
@@ -311,16 +311,6 @@ export default {
 	right: 0.25rem;
 }
 
-.app__userNav > .pkpButton > .app__userNav__isLoggedInAsWarning {
-	position: absolute;
-	right: 0.5em;
-	top: 0.5em;
-	font-size: 1rem;
-	color: #fff;
-	background: @primary;
-	border-radius: 50%;
-}
-
 .app__userNav .pkpDropdown__content {
 	min-width: 13rem;
 }
diff --git a/src/components/Container/StatsPage.stories.js b/src/components/Container/StatsPage.stories.js
index 0e7b692d5..81962b0f0 100644
--- a/src/components/Container/StatsPage.stories.js
+++ b/src/components/Container/StatsPage.stories.js
@@ -80,7 +80,7 @@ const EditorialStatsPageWithDataAndTemplate = {
 					:is-active="isSidebarVisible"
 					@click="toggleSidebar"
 				>
-					<Icon icon="filter" :inline="true" />
+					<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 					{{ t('common.filter') }}
 				</PkpButton>
 			</template>
@@ -400,7 +400,7 @@ const PublicationStatsPageWithDataAndTemplate = {
 					:is-active="isSidebarVisible"
 					@click="toggleSidebar"
 				>
-					<Icon icon="filter" :inline="true" />
+					<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 					{{ t('common.filter') }}
 				</PkpButton>
 			</template>
@@ -418,7 +418,7 @@ const PublicationStatsPageWithDataAndTemplate = {
 					:tabindex="isSidebarVisible ? 0 : -1"
 				>
 					<h2>
-						<Icon icon="filter" :inline="true" />
+						<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 						{{ t('common.filter') }}
 					</h2>
 				</PkpHeader>
diff --git a/src/components/Container/SubmissionWizardPage.stories.js b/src/components/Container/SubmissionWizardPage.stories.js
index 62070e41c..a736334f6 100644
--- a/src/components/Container/SubmissionWizardPage.stories.js
+++ b/src/components/Container/SubmissionWizardPage.stories.js
@@ -139,7 +139,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 												type="warning"
 												class="submissionWizard__reviewEmptyWarning"
 											>
-												<Icon icon="exclamation-triangle" :inline="true"></Icon>
+												<Icon icon="Error" class="h-5 w-5" :inline="true"></Icon>
 												{{ error }}
 											</Notification>
 											<ul class="submissionWizard__reviewPanel__list">
@@ -176,14 +176,15 @@ const SubmissionWizardPageWithDataAndTemplate = {
 												type="warning"
 												class="submissionWizard__reviewEmptyWarning"
 											>
-												<Icon icon="exclamation-triangle" :inline="true"></Icon>
+												<Icon icon="Error" class="h-5 w-5" :inline="true"></Icon>
 												No contributors have been added to this submission.
 											</Notification>
 											<ul v-else class="submissionWizard__reviewPanel__list">
 												<li v-for="(error, i) in errors.contributors" :key="i">
 													<Notification type="warning">
 														<Icon
-															icon="exclamation-triangle"
+															icon="Error"
+															class="h-5 w-5"
 															:inline="true"
 														></Icon>
 														{{ error }}
@@ -221,7 +222,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 														:key="i"
 														type="warning"
 													>
-														<Icon icon="exclamation-triangle"></Icon>
+														<Icon icon="Error" class="h-5 w-5"></Icon>
 														{{ error }}
 													</Notification>
 												</template>
@@ -240,7 +241,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 														:key="i"
 														type="warning"
 													>
-														<Icon icon="exclamation-triangle"></Icon>
+														<Icon icon="Error" class="h-5 w-5"></Icon>
 														{{ error }}
 													</Notification>
 												</template>
@@ -262,7 +263,7 @@ const SubmissionWizardPageWithDataAndTemplate = {
 														:key="i"
 														type="warning"
 													>
-														<Icon icon="exclamation-triangle"></Icon>
+														<Icon icon="Error" class="h-5 w-5"></Icon>
 														{{ error }}
 													</Notification>
 												</template>
diff --git a/src/components/DateRange/DateRange.vue b/src/components/DateRange/DateRange.vue
index 85e53e278..952aa1779 100644
--- a/src/components/DateRange/DateRange.vue
+++ b/src/components/DateRange/DateRange.vue
@@ -8,7 +8,11 @@
 			@click="toggle"
 			@blur="closeOnBlur"
 		>
-			<Icon icon="calendar" />
+			<div
+				class="flex h-8 w-8 items-center justify-center border-e border-e-light border-opacity-40 text-primary"
+			>
+				<Icon icon="Calendar" class="h-5 w-5" :inline="true" />
+			</div>
 			<span class="-screenReader">
 				{{ changeDateRangeLabel }}
 			</span>
@@ -61,8 +65,11 @@
 					</label>
 				</fieldset>
 				<PkpButton @click="applyCustomRange">{{ applyLabel }}</PkpButton>
-				<div v-if="errorMessage" class="pkpDateRange__error">
-					<Icon icon="exclamation-triangle" :inline="true" />
+				<div
+					v-if="errorMessage"
+					class="flex items-center pt-2 text-base-normal"
+				>
+					<Icon icon="Error" class="me-1 h-5 w-5" :inline="true" />
 					<span v-html="errorMessage" />
 				</div>
 			</form>
@@ -452,25 +459,8 @@ export default {
 		border-color: @primary;
 		outline: 0;
 
-		.fa {
-			border-inline-end-color: @primary;
-		}
-	}
-
-	.fa {
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		width: 2rem;
-		border-inline-end: @bg-border-light;
-		color: @primary;
-
-		&:before {
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
+		div {
+			@apply border-e-primary;
 		}
 	}
 }
@@ -558,12 +548,6 @@ export default {
 	color: @bg-border-color;
 }
 
-.pkpDateRange__error {
-	padding-top: 0.5rem;
-	font-size: @font-tiny;
-	line-height: 1.5em;
-}
-
 [dir='rtl'] {
 	.pkpDateRange__button .fa {
 		left: auto;
diff --git a/src/components/Dropdown/Dropdown.stories.js b/src/components/Dropdown/Dropdown.stories.js
index 990fab5c4..529ea20fd 100644
--- a/src/components/Dropdown/Dropdown.stories.js
+++ b/src/components/Dropdown/Dropdown.stories.js
@@ -61,7 +61,7 @@ export const WithSections = {
 					<ul>
 						<li>
 							<a href="#" class="pkpDropdown__action">
-								<Icon icon="check" :inline="true" />
+								<Icon icon="Complete" class="h-5 w-5" :inline="true" />
 								English
 							</a>
 						</li>
diff --git a/src/components/Expander/Expander.vue b/src/components/Expander/Expander.vue
index 2d02117df..a2b4629f3 100644
--- a/src/components/Expander/Expander.vue
+++ b/src/components/Expander/Expander.vue
@@ -1,7 +1,7 @@
 <template>
 	<button class="expander" @click="$emit('toggle')">
-		<Icon v-if="isExpanded" icon="angle-up" />
-		<Icon v-else icon="angle-down" />
+		<Icon v-if="isExpanded" icon="ChevronUp" class="h-5 w-5" :inline="true" />
+		<Icon v-else icon="ChevronDown" class="h-5 w-5" :inline="true" />
 		<span v-if="isExpanded" class="-screenReader">
 			{{ t('list.viewLess', {name: itemName}) }}
 		</span>
@@ -35,7 +35,6 @@ export default {
 @import '../../styles/_import';
 
 .expander {
-	width: 2rem;
 	padding: 0 0.5em;
 	background: transparent;
 	border: @bg-border-light;
diff --git a/src/components/FileAttacher/FileAttacherFileStage.vue b/src/components/FileAttacher/FileAttacherFileStage.vue
index 185586947..c80ee71b3 100644
--- a/src/components/FileAttacher/FileAttacherFileStage.vue
+++ b/src/components/FileAttacher/FileAttacherFileStage.vue
@@ -45,7 +45,7 @@
 		<ButtonRow class="fileAttacher__footer">
 			<template #end>
 				<PkpButton :is-link="true" @click="$emit('cancel')">
-					<Icon icon="long-arrow-left" :inline="true" />
+					<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 					{{ backLabel }}
 				</PkpButton>
 			</template>
diff --git a/src/components/FileAttacher/FileAttacherLibrary.vue b/src/components/FileAttacher/FileAttacherLibrary.vue
index fa7c822be..89e4bd3e9 100644
--- a/src/components/FileAttacher/FileAttacherLibrary.vue
+++ b/src/components/FileAttacher/FileAttacherLibrary.vue
@@ -26,7 +26,7 @@
 		<ButtonRow class="fileAttacher__footer">
 			<template #end>
 				<PkpButton :is-link="true" @click="$emit('cancel')">
-					<Icon icon="long-arrow-left" :inline="true" />
+					<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 					{{ backLabel }}
 				</PkpButton>
 			</template>
diff --git a/src/components/FileAttacher/FileAttacherReviewFiles.vue b/src/components/FileAttacher/FileAttacherReviewFiles.vue
index bc1aff400..95c1d78f8 100644
--- a/src/components/FileAttacher/FileAttacherReviewFiles.vue
+++ b/src/components/FileAttacher/FileAttacherReviewFiles.vue
@@ -20,7 +20,7 @@
 		<ButtonRow class="fileAttacher__footer">
 			<template #end>
 				<PkpButton :is-link="true" @click="$emit('cancel')">
-					<Icon icon="long-arrow-left" :inline="true" />
+					<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 					{{ backLabel }}
 				</PkpButton>
 			</template>
diff --git a/src/components/FileAttacher/FileAttacherUpload.vue b/src/components/FileAttacher/FileAttacherUpload.vue
index 3d6d6bc4f..391797105 100644
--- a/src/components/FileAttacher/FileAttacherUpload.vue
+++ b/src/components/FileAttacher/FileAttacherUpload.vue
@@ -59,7 +59,7 @@
 		<ButtonRow class="fileAttacher__footer">
 			<template #end>
 				<PkpButton :is-link="true" @click="$emit('cancel')">
-					<Icon icon="long-arrow-left" :inline="true" />
+					<Icon icon="ArrowLeft" class="h-4 w-4" :inline="true" />
 					{{ backLabel }}
 				</PkpButton>
 			</template>
diff --git a/src/components/Filter/Filter.vue b/src/components/Filter/Filter.vue
index 085e4eac2..9aa5fd7eb 100644
--- a/src/components/Filter/Filter.vue
+++ b/src/components/Filter/Filter.vue
@@ -12,7 +12,7 @@
 			class="pkpFilter__remove"
 			@click.prevent.stop="remove(param, value)"
 		>
-			<Icon icon="times-circle-o" />
+			<Icon icon="Cancel" class="h-4 w-4 text-negative" />
 			<span class="-screenReader">
 				{{ t('common.filterRemove', {filterTitle: title}) }}
 			</span>
diff --git a/src/components/Filter/FilterSlider.vue b/src/components/Filter/FilterSlider.vue
index dd1ad7e40..e08fa0e83 100644
--- a/src/components/Filter/FilterSlider.vue
+++ b/src/components/Filter/FilterSlider.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="pkpFilter pkpFilter--slider" :class="classes">
 		<button v-if="isFilterActive" class="pkpFilter__remove" @click="remove">
-			<Icon icon="times-circle-o" />
+			<Icon icon="Cancel" class="h-4 w-4 text-negative" />
 			<span class="-screenReader">
 				{{ t('common.filterRemove', {filterTitle: title}) }}
 			</span>
 		</button>
 		<button v-else class="pkpFilter__add" @click="enable">
-			<Icon icon="plus-square-o" />
+			<Icon icon="Add" class="h-4 w-4" />
 			<span class="-screenReader">
 				{{ t('common.filterAdd', {filterTitle: title}) }}
 			</span>
@@ -41,7 +41,8 @@
 					<Icon
 						v-for="i in 5"
 						:key="i"
-						:icon="i <= currentValue ? 'star' : 'star-o'"
+						:icon="i <= currentValue ? 'StarTicked' : 'Star'"
+						class="h-4 w-4"
 					/>
 				</span>
 				<template v-else>
diff --git a/src/components/Filter/FilterSliderMultirange.vue b/src/components/Filter/FilterSliderMultirange.vue
index 4b09c0265..31075a0dc 100644
--- a/src/components/Filter/FilterSliderMultirange.vue
+++ b/src/components/Filter/FilterSliderMultirange.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="pkpFilter--slider pkpFilter--sliderMultirange" :class="classes">
 		<button v-if="isFilterActive" class="pkpFilter__remove" @click="remove">
-			<Icon icon="times-circle-o" />
+			<Icon icon="Cancel" class="h-4 w-4 text-negative" />
 			<span class="-screenReader">
 				{{ t('common.filterRemove', {filterTitle: title}) }}
 			</span>
 		</button>
 		<button v-else class="pkpFilter__add" @click="enable">
-			<Icon icon="plus-square-o" />
+			<Icon icon="Add" class="h-4 w-4" />
 			<span class="-screenReader">
 				{{ t('common.filterAdd', {filterTitle: title}) }}
 			</span>
diff --git a/src/components/Form/FieldError.vue b/src/components/Form/FieldError.vue
index 38e577725..c8893259c 100644
--- a/src/components/Form/FieldError.vue
+++ b/src/components/Form/FieldError.vue
@@ -5,7 +5,7 @@
 			:key="message"
 			class="pkpFieldError__message"
 		>
-			<Icon icon="exclamation-triangle" :inline="true" />
+			<Icon icon="Error" class="me-1 h-4 w-4 text-on-dark" :inline="true" />
 			<span v-html="message" />
 		</div>
 	</div>
diff --git a/src/components/Form/Form.vue b/src/components/Form/Form.vue
index 67cc3813e..cd3555845 100644
--- a/src/components/Form/Form.vue
+++ b/src/components/Form/Form.vue
@@ -37,7 +37,8 @@
 					</button>
 					<Icon
 						v-if="pageIdsWithErrors.includes(page.id)"
-						icon="exclamation-triangle"
+						icon="Error"
+						class="h-4 w-4"
 						:inline="true"
 					/>
 				</li>
@@ -654,7 +655,7 @@ export default {
 		margin-top: 1em;
 	}
 
-	.fa {
+	span {
 		position: absolute;
 		top: 50%;
 		left: 100%;
diff --git a/src/components/Form/FormErrors.vue b/src/components/Form/FormErrors.vue
index 995e33640..893d09fbf 100644
--- a/src/components/Form/FormErrors.vue
+++ b/src/components/Form/FormErrors.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pkpFormErrors">
-		<Icon icon="exclamation-triangle" :inline="true" />
+		<Icon icon="Error" class="h-5 w-5" :inline="true" />
 		{{ message }}
 		<ul class="-screenReader">
 			<li v-for="(error, index) in errorList" :key="index">
diff --git a/src/components/Form/FormPage.vue b/src/components/Form/FormPage.vue
index 1038e80d0..72af383a4 100644
--- a/src/components/Form/FormPage.vue
+++ b/src/components/Form/FormPage.vue
@@ -33,7 +33,7 @@
 						{{ t('common.saving') }}
 					</span>
 					<span v-else-if="hasRecentSave" class="pkpFormPage__status">
-						<Icon icon="check" :inline="true" />
+						<Icon icon="Complete" class="h-5 w-5 text-success" :inline="true" />
 						{{ t('form.saved') }}
 					</span>
 				</transition>
@@ -250,10 +250,6 @@ export default {
 	white-space: nowrap;
 	flex-shrink: 0;
 
-	.fa {
-		color: @yes;
-	}
-
 	.pkpSpinner {
 		margin-inline-end: 0.25rem;
 	}
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index 5d6a0c7cd..c227d5310 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -92,10 +92,10 @@
 					{{ item.label }}
 					<button
 						v-if="!isDisabled"
-						class="pkpAutosuggest__deselect"
+						class="pkpAutosuggest__deselect text-negative hover:text-on-dark"
 						@click.stop.prevent="deselect(item)"
 					>
-						<Icon icon="times" />
+						<Icon icon="Cancel" class="h-3 w-3" />
 						<span class="-screenReader">
 							{{ deselectLabel.replace('{$item}', item.label) }}
 						</span>
@@ -519,14 +519,6 @@ export default {
 	border-bottom-right-radius: 1.2em;
 	color: @no;
 
-	.fa {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		margin-left: -1px;
-	}
-
 	&:hover,
 	&:focus {
 		outline: 0;
diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
index 0b492abdf..884d24c02 100644
--- a/src/components/Form/fields/FieldOrcid.vue
+++ b/src/components/Form/fields/FieldOrcid.vue
@@ -23,7 +23,8 @@
 			<Icon
 				v-if="isVerified && hasOrcid"
 				:class="'mr-2'"
-				:icon="'orcid'"
+				icon="Orcid"
+				class="h-6 w-6"
 				:inline="true"
 			/>
 			<div
diff --git a/src/components/Form/fields/FieldPubId.vue b/src/components/Form/fields/FieldPubId.vue
index 03fa7d0b2..f620dbaec 100644
--- a/src/components/Form/fields/FieldPubId.vue
+++ b/src/components/Form/fields/FieldPubId.vue
@@ -58,9 +58,9 @@
 			<div
 				v-if="pattern && !canGenerateId && !currentValue"
 				:id="describedByDescriptionId"
-				class="pkpFormField--pubid__warning"
+				class="mt-1 flex items-center text-base-normal"
 			>
-				<Icon icon="exclamation-triangle" :inline="true" />
+				<Icon icon="Error" class="h-4 w-4" :inline="true" />
 				{{ missingPartsLabel }}
 			</div>
 			<FieldError
@@ -259,10 +259,4 @@ export default {
 	margin-inline-start: 0.25rem;
 	height: 2.5rem; // Match input height
 }
-
-.pkpFormField--pubid__warning {
-	font-size: @font-tiny;
-	line-height: 1.65em;
-	margin-top: 0.25rem;
-}
 </style>
diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue
index 073fcc545..7f63cb85c 100644
--- a/src/components/Form/fields/FieldRichTextarea.vue
+++ b/src/components/Form/fields/FieldRichTextarea.vue
@@ -66,7 +66,8 @@
 				<div v-if="wordLimit" class="pkpFormField--richTextarea__wordLimit">
 					<Icon
 						v-if="wordCount > wordLimit"
-						icon="exclamation-triangle"
+						icon="Error"
+						class="h-4 w-4"
 						:inline="true"
 					/>
 					{{
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index 7ed877ab4..29a9aac9a 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -1,39 +1,14 @@
 <template>
-	<svg
-		v-if="icon === 'orcid'"
-		class="pkpIcon--orcid"
-		:class="classes"
-		viewBox="0 0 256 256"
-		aria-hidden="true"
+	<span
+		v-if="isSvgIcon"
+		class="inline-block align-middle rtl:scale-x-[-1]"
+		:class="{'text-negative': icon === 'Error'}"
 	>
-		<path
-			class="pkpIcon--orcid__bg"
-			d="M256,128c0,70.7-57.3,128-128,128C57.3,256,0,198.7,0,128C0,57.3,57.3,0,128,0C198.7,0,256,57.3,256,128z"
-		/>
-		<g>
-			<path
-				class="pkpIcon--orcid__fill"
-				d="M86.3,186.2H70.9V79.1h15.4v48.4V186.2z"
-			/>
-			<path
-				class="pkpIcon--orcid__fill"
-				d="M108.9,79.1h41.6c39.6,0,57,28.3,57,53.6c0,27.5-21.5,53.6-56.8,53.6h-41.8V79.1z M124.3,172.4h24.5
-				c34.9,0,42.9-26.5,42.9-39.7c0-21.5-13.7-39.7-43.7-39.7h-23.7V172.4z"
-			/>
-			<path
-				class="pkpIcon--orcid__fill"
-				d="M88.7,56.8c0,5.5-4.5,10.1-10.1,10.1c-5.6,0-10.1-4.6-10.1-10.1c0-5.6,4.5-10.1,10.1-10.1
-				C84.2,46.7,88.7,51.3,88.7,56.8z"
-			/>
-		</g>
-	</svg>
-	<span v-else-if="isSvgIcon" class="inline-block rtl:scale-x-[-1]">
 		<component :is="svgIcons[icon]"></component>
 	</span>
 	<span v-else class="fa" :class="classes" aria-hidden="true"></span>
 </template>
 
-<script></script>
 <script setup>
 import {defineProps, computed} from 'vue';
 import Add from './icons/Add.vue';
@@ -54,6 +29,8 @@ import Bullets from './icons/Bullets.vue';
 import Calendar from './icons/Calendar.vue';
 import Cancel from './icons/Cancel.vue';
 import Catalog from './icons/Catalog.vue';
+import Checkbox from './icons/Checkbox.vue';
+import CheckboxTicked from './icons/CheckboxTicked.vue';
 import ChevronDown from './icons/ChevronDown.vue';
 import ChevronLeft from './icons/ChevronLeft.vue';
 import ChevronRight from './icons/ChevronRight.vue';
@@ -161,6 +138,8 @@ const svgIcons = {
 	Calendar,
 	Cancel,
 	Catalog,
+	Checkbox,
+	CheckboxTicked,
 	ChevronDown,
 	ChevronLeft,
 	ChevronRight,
@@ -292,23 +271,4 @@ const classes = computed(() => {
 .fa-exclamation-triangle {
 	color: @no;
 }
-
-/**
- * Orcid icon
- */
-.pkpIcon--orcid {
-	display: inline-block;
-	width: 1.5em;
-	height: 1.5em;
-	vertical-align: middle;
-
-	// These colors match the orcid branding guidelines
-	.pkpIcon--orcid__bg {
-		fill: #a6ce39;
-	}
-
-	.pkpIcon--orcid__fill {
-		fill: #ffffff;
-	}
-}
 </style>
diff --git a/src/components/List/List.stories.js b/src/components/List/List.stories.js
index 0f9352009..4324c6e3b 100644
--- a/src/components/List/List.stories.js
+++ b/src/components/List/List.stories.js
@@ -16,20 +16,20 @@ export const Default = {
 			<List>
 				<ListItem>
 					<template #value>
-						<Icon icon="comment-o" :inline="true" />
+						<Icon icon="Comment" class="h-4 w-4 me-2" :inline="true" />
 						32
 					</template>
 					Number of active discussions in this journal.
 				</ListItem>
 				<ListItem>
 					<template #value>
-						<Icon icon="clock-o" :inline="true" />
+						<Icon icon="Clock" class="h-4 w-4 me-2" :inline="true" />
 						67
 					</template>
 					Days until next issue is published.
 				</ListItem>
 				<ListItem>
-					<Icon icon="exclamation-triangle" :inline="true" />
+					<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
 					This journal is not currently available for the public to view. Would you
 					like to
 					<a href="#">make it public</a>
diff --git a/src/components/ListPanel/ListPanel.stories.js b/src/components/ListPanel/ListPanel.stories.js
index 527eab392..8a677ada7 100644
--- a/src/components/ListPanel/ListPanel.stories.js
+++ b/src/components/ListPanel/ListPanel.stories.js
@@ -158,7 +158,7 @@ export const WithFilter = {
 						<h2>List Panel with Filter</h2>
 						<template #actions>
 							<PkpButton :is-active="isSidebarVisible" @click="toggleFilters">
-								<Icon icon="filter" :inline="true" />
+								<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 								Filters
 							</PkpButton>
 						</template>
@@ -167,7 +167,7 @@ export const WithFilter = {
 				<template #sidebar>
 					<PkpHeader :is-one-line="false">
 						<h3>
-							<Icon icon="filter" :inline="true" />
+							<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 							Filters
 						</h3>
 					</PkpHeader>
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue
index e6789a2fb..970cc03b4 100644
--- a/src/components/ListPanel/contributors/ContributorsListPanel.vue
+++ b/src/components/ListPanel/contributors/ContributorsListPanel.vue
@@ -16,7 +16,7 @@
 									publication.status !== getConstant('STATUS_PUBLISHED') &&
 									canEditPublication
 								"
-								icon="sort"
+								icon="Sort"
 								:is-active="isOrdering"
 								:disabled="isLoading"
 								@click="toggleOrdering"
diff --git a/src/components/ListPanel/doi/DoiListPanel.vue b/src/components/ListPanel/doi/DoiListPanel.vue
index cdc06db7a..97f61ead2 100644
--- a/src/components/ListPanel/doi/DoiListPanel.vue
+++ b/src/components/ListPanel/doi/DoiListPanel.vue
@@ -125,7 +125,7 @@
 				<template #sidebar>
 					<PkpHeader :is-one-line="false">
 						<h3>
-							<Icon icon="filter" :inline="true" />
+							<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 							{{ t('common.filter') }}
 						</h3>
 						<template #actions>
@@ -133,7 +133,7 @@
 								class="doiListPanel__statusInfoButton"
 								@click="openStatusInfoModal"
 							>
-								<Icon icon="question-circle" />
+								<Icon icon="AnonymousReview" class="mt-1 h-4 w-4" />
 							</button>
 						</template>
 					</PkpHeader>
diff --git a/src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue b/src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue
index e8492c19c..6e23a245a 100644
--- a/src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue
+++ b/src/components/ListPanel/submissionFiles/SelectSubmissionFileListItem.vue
@@ -31,7 +31,7 @@
 				rel="noopener noreferrer"
 				:aria-describedby="describedById"
 			>
-				<Icon icon="download" />
+				<Icon icon="Download" class="h-4 w-4" />
 				<span class="-screenReader">{{ downloadLabel }}</span>
 			</PkpButton>
 		</div>
diff --git a/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue b/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
index a6eb809e8..392ca8ce0 100644
--- a/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
+++ b/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
@@ -42,8 +42,8 @@
 				</div>
 			</div>
 			<div v-if="!item.genreId" class="listPanel--submissionFiles__setGenre">
-				<span role="alert">
-					<Icon icon="exclamation-triangle" :inline="true" />
+				<span role="alert" class="flex items-center">
+					<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
 					<span
 						:id="genrePromptId"
 						class="listPanel--submissionFiles__setGenreLabel"
diff --git a/src/components/ListPanel/submissions/CatalogListItem.vue b/src/components/ListPanel/submissions/CatalogListItem.vue
index 1e7012e4c..cbcc6f425 100644
--- a/src/components/ListPanel/submissions/CatalogListItem.vue
+++ b/src/components/ListPanel/submissions/CatalogListItem.vue
@@ -31,11 +31,11 @@
 					{{ t('submission.list.viewEntry') }}
 				</PkpButton>
 				<button
-					class="listPanel__item--catalog__select listPanel__item--catalog__select--first"
+					class="listPanel__item--catalog__select listPanel__item--catalog__select--first text-secondary"
 					@click.prevent="toggleFeatured"
 				>
-					<Icon v-if="isFeatured" icon="check-square-o" />
-					<Icon v-else icon="square-o" />
+					<Icon v-if="isFeatured" icon="CheckboxTicked" class="h-4 w-4" />
+					<Icon v-else icon="Checkbox" class="h-4 w-4" />
 					<span class="-screenReader">
 						<template v-if="isFeatured">
 							{{ t('catalog.manage.isFeatured') }}
@@ -46,10 +46,13 @@
 					</span>
 				</button>
 				<button
-					class="listPanel__item--catalog__select"
+					class="listPanel__item--catalog__select text-secondary"
 					@click.prevent="toggleNewRelease"
 				>
-					<Icon :icon="isNewRelease ? 'check-square-o' : 'square-o'" />
+					<Icon
+						:icon="isNewRelease ? 'CheckboxTicked' : 'Checkbox'"
+						class="h-4 w-4"
+					/>
 					<span class="-screenReader">
 						<template v-if="isNewRelease">
 							{{ t('catalog.manage.isNewRelease') }}
diff --git a/src/components/ListPanel/submissions/CatalogListPanel.vue b/src/components/ListPanel/submissions/CatalogListPanel.vue
index db3d3e5fc..54bb5f954 100644
--- a/src/components/ListPanel/submissions/CatalogListPanel.vue
+++ b/src/components/ListPanel/submissions/CatalogListPanel.vue
@@ -22,13 +22,13 @@
 							:is-active="isSidebarVisible"
 							@click="isSidebarVisible = !isSidebarVisible"
 						>
-							<Icon icon="filter" :inline="true" />
+							<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 							{{ t('common.filter') }}
 						</PkpButton>
 						<template v-if="canOrderCurrent">
 							<PkpButton
 								class="listPanel--catalog__orderToggle"
-								icon="sort"
+								icon="Sort"
 								:is-active="isOrdering"
 								@click="toggleOrdering"
 							>
@@ -72,7 +72,7 @@
 			<template #sidebar>
 				<PkpHeader :is-one-line="false">
 					<h3>
-						<Icon icon="filter" :inline="true" />
+						<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 						{{ t('common.filter') }}
 					</h3>
 				</PkpHeader>
diff --git a/src/components/ListPanel/submissions/SubmissionsListItem.vue b/src/components/ListPanel/submissions/SubmissionsListItem.vue
index 84fb6e968..512289159 100644
--- a/src/components/ListPanel/submissions/SubmissionsListItem.vue
+++ b/src/components/ListPanel/submissions/SubmissionsListItem.vue
@@ -58,15 +58,17 @@
 					<span v-html="reviewerWorkflowLink" />
 				</div>
 				<div v-else-if="notice" class="listPanel__item--submission__notice">
-					<Icon icon="exclamation-triangle" :inline="true" />
-					{{ notice }}
-					<button
-						v-if="shouldAssignEditor"
-						class="-linkButton"
-						@click.stop.prevent="openAssignParticipant"
-					>
-						{{ t('submission.list.assignEditor') }}
-					</button>
+					<div class="flex items-center space-x-1">
+						<Icon icon="Error" class="h-4 w-4" :inline="true" />
+						<span>{{ notice }}</span>
+						<button
+							v-if="shouldAssignEditor"
+							class="-linkButton"
+							@click.stop.prevent="openAssignParticipant"
+						>
+							{{ t('submission.list.assignEditor') }}
+						</button>
+					</div>
 				</div>
 			</div>
 
@@ -81,17 +83,29 @@
 							more easily acquired by screen readers from the details panel. -->
 						<div class="listPanel__item--submission__flags" aria-hidden="true">
 							<span v-if="isReviewStage">
-								<Icon icon="user-o" :inline="true" />
+								<Icon
+									icon="User"
+									class="me-1 h-4 w-4 text-secondary"
+									:inline="true"
+								/>
 								{{ completedReviewsCount }}/{{
 									currentReviewAssignments.length
 								}}
 							</span>
 							<span v-if="activeStage.files.count">
-								<Icon icon="file-text-o" :inline="true" />
+								<Icon
+									icon="MySubmissions"
+									class="me-1 h-4 w-4 text-secondary"
+									:inline="true"
+								/>
 								{{ activeStage.files.count }}
 							</span>
 							<span v-if="openQueryCount">
-								<Icon icon="comment-o" :inline="true" />
+								<Icon
+									icon="Comment"
+									class="me-1 h-4 w-4 text-secondary"
+									:inline="true"
+								/>
 								{{ openQueryCount }}
 							</span>
 						</div>
@@ -114,16 +128,20 @@
 				<template v-else>
 					<div
 						v-if="currentUserLatestReviewAssignment.reviewCancelled"
-						class="listPanel__item--submission__reviewCancelled"
+						class="listPanel__item--submission__reviewCancelled flex items-center"
 					>
-						<Icon icon="exclamation-triangle" :inline="true" />
+						<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
 						{{ t('submission.list.reviewCancelled') }}
 					</div>
 					<div
 						v-if="currentUserLatestReviewAssignment.reviewComplete"
-						class="listPanel__item--submission__reviewComplete"
+						class="flex items-center"
 					>
-						<Icon icon="check" :inline="true" />
+						<Icon
+							icon="Complete"
+							class="me-1 h-4 w-4 text-success"
+							:inline="true"
+						/>
 						{{ t('submission.list.reviewComplete') }}
 					</div>
 				</template>
@@ -166,21 +184,21 @@
 			<List>
 				<ListItem v-if="isReviewStage">
 					<template #value>
-						<Icon icon="user-o" :inline="true" />
+						<Icon icon="User" class="me-2 h-4 w-4" :inline="true" />
 						{{ completedReviewsCount }}/{{ currentReviewAssignments.length }}
 					</template>
 					{{ t('submission.list.reviewsCompleted') }}
 				</ListItem>
 				<ListItem v-if="!isSubmissionStage">
 					<template #value>
-						<Icon icon="file-text-o" :inline="true" />
+						<Icon icon="MySubmissions" class="me-2 h-4 w-4" :inline="true" />
 						{{ activeStage.files.count }}
 					</template>
 					{{ activeStageFilesLabel }}
 				</ListItem>
 				<ListItem v-if="!item.submissionProgress">
 					<template #value>
-						<Icon icon="comment-o" :inline="true" />
+						<Icon icon="Comment" class="me-2 h-4 w-4" :inline="true" />
 						{{ openQueryCount }}
 					</template>
 					{{ t('submission.list.discussions') }}
@@ -930,12 +948,6 @@ export default {
 	> * {
 		margin-inline-end: 1em;
 	}
-
-	.fa {
-		margin-inline-end: 0.25em;
-		font-size: @font-sml;
-		color: @text-light-rgba;
-	}
 }
 
 .listPanel__item--submission__stage {
@@ -957,10 +969,6 @@ export default {
 	margin-inline-end: 1rem;
 }
 
-.listPanel__item--submission__reviewComplete .fa {
-	color: @yes;
-}
-
 [dir='rtl'] {
 	.listPanel__item--submission__id {
 		left: auto;
diff --git a/src/components/ListPanel/submissions/SubmissionsListPanel.vue b/src/components/ListPanel/submissions/SubmissionsListPanel.vue
index 1a7baec72..92db66778 100644
--- a/src/components/ListPanel/submissions/SubmissionsListPanel.vue
+++ b/src/components/ListPanel/submissions/SubmissionsListPanel.vue
@@ -18,7 +18,7 @@
 							:is-active="isSidebarVisible"
 							@click="isSidebarVisible = !isSidebarVisible"
 						>
-							<Icon icon="filter" :inline="true" />
+							<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 							{{ t('common.filter') }}
 						</PkpButton>
 						<PkpButton
@@ -34,7 +34,7 @@
 			<template #sidebar>
 				<PkpHeader :is-one-line="false">
 					<h3>
-						<Icon icon="filter" :inline="true" />
+						<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 						{{ t('common.filter') }}
 					</h3>
 				</PkpHeader>
diff --git a/src/components/ListPanel/users/SelectReviewerListItem.vue b/src/components/ListPanel/users/SelectReviewerListItem.vue
index 93ae6ceea..5da00d213 100644
--- a/src/components/ListPanel/users/SelectReviewerListItem.vue
+++ b/src/components/ListPanel/users/SelectReviewerListItem.vue
@@ -22,12 +22,8 @@
 						<Icon
 							v-for="(star, index) in stars"
 							:key="index"
-							icon="star"
-							:class="
-								star
-									? 'listPanel__item--reviewer__star--on'
-									: 'listPanel__item--reviewer__star--off'
-							"
+							:icon="star ? 'StarTicked' : 'Star'"
+							class="h-4 w-4 text-stage-in-review"
 						/>
 						<span class="-screenReader">
 							{{
@@ -49,28 +45,31 @@
 							class="listPanel__item--reviewer__orcid"
 							target="_blank"
 						>
-							<Icon icon="orcid" :inline="true" />
+							<Icon icon="Orcid" :inline="true" class="me-1 h-5 w-5" />
 							{{ item.orcid }}
 						</a>
 					</div>
 				</div>
 
-				<div v-if="currentlyAssigned" class="listPanel__item--reviewer__notice">
-					<Icon icon="exclamation-triangle" :inline="true" />
+				<div
+					v-if="currentlyAssigned"
+					class="listPanel__item--reviewer__notice flex items-center"
+				>
+					<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
 					{{ currentlyAssignedLabel }}
 				</div>
 				<div
 					v-else-if="assignedToLastRound"
-					class="listPanel__item--reviewer__notice"
+					class="listPanel__item--reviewer__notice flex items-center"
 				>
-					<Icon icon="thumb-tack" :inline="true" />
+					<Icon icon="Pin" class="me-1 h-3 w-3" :inline="true" />
 					{{ assignedToLastRoundLabel }}
 				</div>
 				<div
 					v-else-if="warnOnAssignment && !isWarningBypassed"
-					class="listPanel__item--reviewer__notice"
+					class="listPanel__item--reviewer__notice flex items-center space-x-1"
 				>
-					<Icon icon="lock" :inline="true" />
+					<Icon icon="Lock" class="me-1 h-3 w-3" :inline="true" />
 					{{ warnOnAssignmentLabel }}
 					<button
 						class="listPanel__item--reviewer__noticeAction"
@@ -88,19 +87,37 @@
 					aria-hidden="true"
 				>
 					<span class="listPanel__item--reviewer__complete">
-						<Icon icon="check-circle-o" :inline="true" />
-						{{ item.reviewsCompleted }}
+						<div class="flex items-center">
+							<Icon
+								icon="Complete"
+								class="me-1 h-4 w-4 text-default"
+								:inline="true"
+							/>
+							{{ item.reviewsCompleted }}
+						</div>
 					</span>
 					<span class="listPanel__item--reviewer__last">
-						<Icon icon="history" :inline="true" />
-						{{ daysSinceLastAssignmentLabelCompiled }}
+						<div class="flex items-center">
+							<Icon
+								icon="History"
+								class="me-1 h-4 w-4 text-default"
+								:inline="true"
+							/>
+							{{ daysSinceLastAssignmentLabelCompiled }}
+						</div>
 					</span>
 					<span
 						v-if="item.interests.length"
 						class="listPanel__item--reviewer__interests"
 					>
-						<Icon icon="book" :inline="true" />
-						{{ interestsString }}
+						<div class="flex items-center">
+							<Icon
+								icon="Book"
+								class="me-1 h-4 w-4 text-default"
+								:inline="true"
+							/>
+							{{ interestsString }}
+						</div>
 					</span>
 					<span
 						v-if="affiliationMatch(item.affiliation)"
@@ -140,49 +157,77 @@
 			<List>
 				<ListItem>
 					<template #value>
-						<Icon icon="clock-o" :inline="true" />
+						<Icon
+							icon="Clock"
+							class="me-1 h-4 w-4 text-default"
+							:inline="true"
+						/>
 						{{ item.reviewsActive }}
 					</template>
 					{{ activeReviewsLabel }}
 				</ListItem>
 				<ListItem>
 					<template #value>
-						<Icon icon="check-circle-o" :inline="true" />
+						<Icon
+							icon="Complete"
+							class="me-1 h-4 w-4 text-default"
+							:inline="true"
+						/>
 						{{ item.reviewsCompleted }}
 					</template>
 					{{ completedReviewsLabel }}
 				</ListItem>
 				<ListItem>
 					<template #value>
-						<Icon icon="times-circle-o" :inline="true" />
+						<Icon
+							icon="Cancel"
+							class="me-1 h-4 w-4 text-default"
+							:inline="true"
+						/>
 						{{ item.reviewsDeclined }}
 					</template>
 					{{ declinedReviewsLabel }}
 				</ListItem>
 				<ListItem>
 					<template #value>
-						<Icon icon="ban" :inline="true" />
+						<Icon
+							icon="Declined"
+							class="me-1 h-4 w-4 text-default"
+							:inline="true"
+						/>
 						{{ item.reviewsCancelled }}
 					</template>
 					{{ cancelledReviewsLabel }}
 				</ListItem>
 				<ListItem>
 					<template #value>
-						<Icon icon="history" :inline="true" />
+						<Icon
+							icon="History"
+							class="me-1 h-4 w-4 text-default"
+							:inline="true"
+						/>
 						{{ daysSinceLastAssignment }}
 					</template>
 					{{ daysSinceLastAssignmentDescriptionLabel }}
 				</ListItem>
 				<ListItem>
 					<template #value>
-						<Icon icon="calendar" :inline="true" />
+						<Icon
+							icon="Calendar"
+							class="me-1 h-4 w-4 text-default"
+							:inline="true"
+						/>
 						{{ item.averageReviewCompletionDays }}
 					</template>
 					{{ averageCompletionLabel }}
 				</ListItem>
 				<ListItem v-if="item.interests.length">
 					<div class="listPanel__item--reviewer__detailHeading">
-						<Icon icon="book" :inline="true" />
+						<Icon
+							icon="Book"
+							class="me-1 h-4 w-4 text-default"
+							:inline="true"
+						/>
 						{{ reviewInterestsLabel }}
 					</div>
 					{{ interestsString }}
@@ -513,12 +558,6 @@ export default {
 	min-width: 9em;
 }
 
-.listPanel__item--reviewer__brief .fa,
-.listPanel__itemExpanded--reviewer .fa {
-	color: @bg-dark;
-	font-size: @font-sml;
-}
-
 .listPanel__item--reviewer__detailHeading {
 	margin-bottom: 0.5em;
 	font-weight: @bold;
diff --git a/src/components/ListPanel/users/SelectReviewerListPanel.vue b/src/components/ListPanel/users/SelectReviewerListPanel.vue
index 366c4de56..e22a5c5ea 100644
--- a/src/components/ListPanel/users/SelectReviewerListPanel.vue
+++ b/src/components/ListPanel/users/SelectReviewerListPanel.vue
@@ -21,7 +21,7 @@
 								:is-active="isSidebarVisible"
 								@click="isSidebarVisible = !isSidebarVisible"
 							>
-								<Icon icon="filter" :inline="true" />
+								<Icon icon="Filter" class="h-4 w-4" :inline="true" />
 								{{ t('common.filter') }}
 							</PkpButton>
 						</template>
@@ -29,8 +29,8 @@
 				</template>
 				<template #sidebar>
 					<PkpHeader :is-one-line="false">
-						<h2>
-							<Icon icon="filter" :inline="true" />
+						<h2 class="flex items-center">
+							<Icon icon="Filter" class="me-1 h-4 w-4" :inline="true" />
 							{{ t('common.filter') }}
 						</h2>
 					</PkpHeader>
diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js
index e75397ddf..7353439d1 100644
--- a/src/components/Modal/Modal.stories.js
+++ b/src/components/Modal/Modal.stories.js
@@ -187,14 +187,14 @@ export const WithActions = {
 				<List>
 					<ListItem>
 						<template #value>
-							<Icon icon="comment-o" :inline="true" />
+							<Icon icon="Comment" class="h-3 w-3" :inline="true" />
 							23
 						</template>
 						Emails sent today
 					</ListItem>
 					<ListItem>
 						<template #value>
-							<Icon icon="file-text-o" :inline="true" />
+							<Icon icon="MySubmissions" class="h-4 w-4" :inline="true" />
 							9
 						</template>
 						Submissions rejected today
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index fca1678a6..041934e7a 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -51,14 +51,13 @@
 										class="modal__closeButton__x"
 									/>
 									<Icon
-										icon="chevron-left"
-										:aria-hidden="true"
-										class="modal__closeButton__left"
+										icon="ChevronLeft"
+										class="modal__closeButton__left h-5 w-5"
 									/>
 									<Icon
-										icon="chevron-right"
+										icon="ChevronRight"
 										:aria-hidden="true"
-										class="modal__closeButton__right"
+										class="modal__closeButton__right h-5 w-5"
 									/>
 									<span class="-screenReader">{{ closeLabel }}</span>
 								</button>
diff --git a/src/components/MultilingualProgress/MultilingualProgress.vue b/src/components/MultilingualProgress/MultilingualProgress.vue
index 1e02bfeb5..73f78fea2 100644
--- a/src/components/MultilingualProgress/MultilingualProgress.vue
+++ b/src/components/MultilingualProgress/MultilingualProgress.vue
@@ -9,7 +9,7 @@
 			aria-hidden="true"
 			@click.prevent
 		>
-			<Icon icon="globe" />
+			<Icon icon="Globe" class="h-5 w-5" />
 		</button>
 		<span class="-screenReader">{{ tooltip }}</span>
 	</span>
@@ -81,20 +81,20 @@ export default {
 		cursor: pointer;
 	}
 
-	.fa {
+	span {
 		font-size: @line-sml;
 	}
 }
 
-.multilingualProgress--isEmpty .fa {
+.multilingualProgress--isEmpty span {
 	color: @text-light;
 }
 
-.multilingualProgress--isIncomplete .fa {
+.multilingualProgress--isIncomplete span {
 	color: @no;
 }
 
-.multilingualProgress--isComplete .fa {
+.multilingualProgress--isComplete span {
 	color: @yes;
 }
 </style>
diff --git a/src/components/Notification/Notification.stories.js b/src/components/Notification/Notification.stories.js
index 4112632ee..8f25a50c8 100644
--- a/src/components/Notification/Notification.stories.js
+++ b/src/components/Notification/Notification.stories.js
@@ -47,9 +47,11 @@ export const Warning = {
 		},
 		template: `
 			<Notification v-bind="args" >
-				<Icon icon="exclamation-triangle" :inline="true" />
-				This submission does not have any contributors. At least one contributor
-				must be provided.
+				<div class="flex items-center">
+					<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+					This submission does not have any contributors. At least one contributor
+					must be provided.
+				</div>
 			</Notification>
 		`,
 	}),
diff --git a/src/components/Orderer/Orderer.vue b/src/components/Orderer/Orderer.vue
index 8d356f156..0d2f68832 100644
--- a/src/components/Orderer/Orderer.vue
+++ b/src/components/Orderer/Orderer.vue
@@ -1,16 +1,16 @@
 <template>
 	<div class="orderer">
 		<span v-if="isDraggable" class="orderer__dragDrop" aria-hidden="true">
-			<Icon icon="sort" />
+			<Icon icon="Sort" class="h-5 w-5" />
 		</span>
 		<button class="orderer__up" @click.prevent="up">
-			<Icon icon="angle-up" />
+			<Icon icon="ChevronUp" class="h-5 w-5" />
 			<span class="-screenReader">
 				{{ t('common.orderUp', {itemTitle: itemTitle}) }}
 			</span>
 		</button>
 		<button class="orderer__down" @click.prevent="down">
-			<Icon icon="angle-down" />
+			<Icon icon="ChevronDown" class="h-5 w-5" />
 			<span class="-screenReader">
 				{{ t('common.orderDown', {itemTitle: itemTitle}) }}
 			</span>
@@ -91,7 +91,7 @@ export default {
 		outline: 0;
 	}
 
-	.fa {
+	span {
 		position: absolute;
 		top: 50%;
 		left: 50%;
@@ -121,11 +121,6 @@ export default {
 	&:focus {
 		background: @bg-light;
 	}
-
-	.fa {
-		font-size: 20px;
-		font-weight: @bold;
-	}
 }
 
 .orderer__up {
diff --git a/src/components/Panel/Panel.stories.js b/src/components/Panel/Panel.stories.js
index 92bfaf4ae..f9fc94883 100644
--- a/src/components/Panel/Panel.stories.js
+++ b/src/components/Panel/Panel.stories.js
@@ -28,20 +28,20 @@ export const Default = {
 					<List>
 						<ListItem>
 							<template #value>
-								<Icon icon="comment-o" :inline="true" />
+								<Icon icon="Comment" class="h-4 w-4 me-1" :inline="true" />
 								32
 							</template>
 							Number of active discussions in this journal.
 						</ListItem>
 						<ListItem>
 							<template #value>
-								<Icon icon="clock-o" :inline="true" />
+								<Icon icon="Clock" class="h-4 w-4 me-1" :inline="true" />
 								67
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem>
-							<Icon icon="exclamation-triangle" :inline="true" />
+						<ListItem class="flex items-center">
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
 							This journal is not currently available for the public to view. Would
 							you like to
 							<a href="#">make it public</a>
@@ -74,20 +74,20 @@ export const ManySections = {
 					<List>
 						<ListItem>
 							<template #value>
-								<Icon icon="comment-o" :inline="true" />
+								<Icon icon="Comment" class="h-4 w-4 me-1" :inline="true" />
 								32
 							</template>
 							Number of active discussions in this journal.
 						</ListItem>
 						<ListItem>
 							<template #value>
-								<Icon icon="clock-o" :inline="true" />
+								<Icon icon="Clock" class="h-4 w-4 me-1" :inline="true" />
 								67
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem>
-							<Icon icon="exclamation-triangle" :inline="true" />
+						<ListItem class="flex items-center">
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
 							This journal is not currently available for the public to view. Would
 							you like to
 							<a href="#">make it public</a>
@@ -106,20 +106,20 @@ export const ManySections = {
 					<List>
 						<ListItem>
 							<template #value>
-								<Icon icon="comment-o" :inline="true" />
+								<Icon icon="Comment" class="h-4 w-4 me-1" :inline="true" />
 								32
 							</template>
 							Number of active discussions in this journal.
 						</ListItem>
 						<ListItem>
 							<template #value>
-								<Icon icon="clock-o" :inline="true" />
+								<Icon icon="Clock" class="h-4 w-4 me-1" :inline="true" />
 								67
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem>
-							<Icon icon="exclamation-triangle" :inline="true" />
+						<ListItem class="flex items-center">
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
 							This journal is not currently available for the public to view. Would
 							you like to
 							<a href="#">make it public</a>
@@ -152,20 +152,20 @@ export const StackHeader = {
 					<List>
 						<ListItem>
 							<template #value>
-								<Icon icon="comment-o" :inline="true" />
+								<Icon icon="Comment" class="h-4 w-4 me-1" :inline="true" />
 								32
 							</template>
 							Number of active discussions in this journal.
 						</ListItem>
 						<ListItem>
 							<template #value>
-								<Icon icon="clock-o" :inline="true" />
+								<Icon icon="Clock" class="h-4 w-4 me-1" :inline="true" />
 								67
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem>
-							<Icon icon="exclamation-triangle" :inline="true" />
+						<ListItem class="flex items-center">
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
 							This journal is not currently available for the public to view. Would
 							you like to
 							<a href="#">make it public</a>
@@ -184,20 +184,20 @@ export const StackHeader = {
 					<List>
 						<ListItem>
 							<template #value>
-								<Icon icon="comment-o" :inline="true" />
+								<Icon icon="Comment" class="h-4 w-4 me-1" :inline="true" />
 								32
 							</template>
 							Number of active discussions in this journal.
 						</ListItem>
 						<ListItem>
 							<template #value>
-								<Icon icon="clock-o" :inline="true" />
+								<Icon icon="Clock" class="h-4 w-4 me-1" :inline="true" />
 								67
 							</template>
 							Days until next issue is published.
 						</ListItem>
-						<ListItem>
-							<Icon icon="exclamation-triangle" :inline="true" />
+						<ListItem class="flex items-center">
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
 							This journal is not currently available for the public to view. Would
 							you like to
 							<a href="#">make it public</a>
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index c137de914..6b0f78ed0 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -11,16 +11,19 @@
 				@keyup="searchPhraseKeyUp"
 			/>
 			<span class="pkpSearch__icons">
-				<Icon icon="search" class="pkpSearch__icons--search" />
+				<Icon
+					icon="Search"
+					class="absolute left-2/4 top-2/4 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform text-primary"
+				/>
 			</span>
 		</label>
 		<button
 			v-if="searchPhrase"
-			class="pkpSearch__clear"
+			class="absolute top-0 h-full w-8 text-negative hover:bg-negative hover:text-on-dark focus:bg-negative focus:text-on-dark ltr:right-0 rtl:left-0 rtl:right-auto"
 			:aria-controls="inputId"
 			@click.prevent="clearSearchPhrase"
 		>
-			<Icon icon="times" />
+			<Icon icon="Cancel" class="relative bottom-[2px] h-4 w-4" />
 			<span class="-screenReader">{{ t('common.clearSearch') }}</span>
 		</button>
 	</div>
@@ -125,34 +128,16 @@ export default {
 			border-color: @primary;
 			background: @primary;
 
-			.pkpSearch__icons--search:before {
-				color: #fff;
+			span {
+				@apply text-on-dark;
 			}
 		}
 	}
 }
 
-.pkpSearch__clear {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 2rem;
-	height: 100%;
-	background: transparent;
-	border: none;
-	border-top-right-radius: @radius;
-	border-bottom-right-radius: @radius;
-	vertical-align: middle;
-	text-align: center;
-	color: @offset;
-	cursor: pointer;
-
-	&:hover,
-	&:focus {
-		outline: 0;
-		background: @offset;
-		color: #fff;
-	}
+.pkpSearch__input::-webkit-search-cancel-button {
+	-webkit-appearance: none;
+	appearance: none;
 }
 
 .pkpSearch__icons {
@@ -164,20 +149,7 @@ export default {
 	border-inline-end: 1px solid #777;
 }
 
-.pkpSearch__icons--search {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	color: @primary;
-}
-
 [dir='rtl'] {
-	.pkpSearch__clear {
-		right: auto;
-		left: 0;
-	}
-
 	.pkpSearch__icons {
 		left: auto;
 		right: 0;
diff --git a/src/components/Steps/Steps.vue b/src/components/Steps/Steps.vue
index 5cd306985..0c2e0c533 100644
--- a/src/components/Steps/Steps.vue
+++ b/src/components/Steps/Steps.vue
@@ -42,7 +42,7 @@
 											current !== step.id && completedSteps.includes(step.id)
 										"
 									>
-										<Icon icon="check" />
+										<Icon icon="Complete" class="h-4 w-4" />
 									</template>
 									<template v-else>
 										{{ i + 1 }}
@@ -61,14 +61,20 @@
 				</li>
 			</ol>
 			<div v-if="collapsed" class="pkpSteps__controls" aria-hidden="true">
-				<span class="pkpSteps__progress">
+				<span class="relative bottom-1 me-1 text-lg-normal">
 					{{ progress }}
 				</span>
-				<PkpButton @click="() => (stepsVisible = !stepsVisible)">
+				<PkpButton
+					class="!px-2 !py-1"
+					@click="() => (stepsVisible = !stepsVisible)"
+				>
 					<span class="-screenReader">
 						{{ showStepsLabel }}
 					</span>
-					<Icon :icon="stepsVisible ? 'chevron-up' : 'chevron-down'" />
+					<Icon
+						:icon="stepsVisible ? 'ChevronUp' : 'ChevronDown'"
+						class="h-5 w-5"
+					/>
 				</PkpButton>
 			</div>
 		</div>
@@ -300,11 +306,6 @@ export default {
 	padding: 0.75rem;
 }
 
-.pkpSteps__progress {
-	font-size: @font-sml;
-	margin-right: 0.25rem;
-}
-
 .pkpSteps__step {
 	list-style: none;
 	// Make line-height consistent for button and span labels
diff --git a/src/components/Tabs/Tabs.stories.js b/src/components/Tabs/Tabs.stories.js
index 69a1a48cc..1cb2a8a32 100644
--- a/src/components/Tabs/Tabs.stories.js
+++ b/src/components/Tabs/Tabs.stories.js
@@ -85,7 +85,7 @@ export const WithIcon = {
 		},
 		template: `
 			<Tabs v-bind="args">
-				<Tab id="first" icon="bell-o" label="First tab">First tab content</Tab>
+				<Tab id="first" icon="Notifications" label="First tab">First tab content</Tab>
 				<Tab id="second" label="Second tab">Second tab content</Tab>
 				<Tab id="third" label="Third tab">Third tab content</Tab>
 			</Tabs>
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index fa6ebb1e6..c48dd8f60 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -18,7 +18,7 @@
 				@keydown.right.exact.prevent="setNextTab"
 			>
 				<template v-if="tab.icon">
-					<Icon :icon="tab.icon"></Icon>
+					<Icon :icon="tab.icon" class="h-4 w-4"></Icon>
 					<span class="-screenReader">{{ tab.label }}</span>
 				</template>
 				<template v-else>
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index dd2ec82c8..5022c67bd 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<button
+	<span
 		v-tooltip="{
 			content: tooltip,
 			theme: 'pkp-tooltip',
@@ -7,9 +7,9 @@
 		class="tooltipButton"
 		@click.prevent
 	>
-		<Icon icon="question-circle" />
-		<span class="-screenReader">{{ label }}</span>
-	</button>
+		<Icon icon="UsefulTips" class="h-4 w-4" />
+		<span v-if="label" class="-screenReader">{{ label }}</span>
+	</span>
 </template>
 
 <script>
diff --git a/src/docs/guide/Accessibility.mdx b/src/docs/guide/Accessibility.mdx
index 4ba8ba36a..d5de7085a 100644
--- a/src/docs/guide/Accessibility.mdx
+++ b/src/docs/guide/Accessibility.mdx
@@ -38,7 +38,7 @@ For example, a search field often uses an icon of a magnifying glass to provide
 ```
 
 ```html
-<Icon icon="search" />
+<Icon icon="Search" class="h-4 w-4" />
 <input id="searchInput" placeholder="Search submissions" />
 <label for="searchInput" class="sr-only">Search submissions</label>
 ```
@@ -49,7 +49,7 @@ An icon may not need a text label for sighted users to understand it's purpose.
 <li>
 	My example submission
 	<button @click="deleteSubmission">
-		<Icon icon="times" />
+		<Icon icon="Cancel" class="h-4 w-4" />
 		<span class="sr-only">Delete My example submission</span>
 	</button>
 </li>
diff --git a/src/pages/acceptInvitation/AcceptInvitationUserDetailsForms.vue b/src/pages/acceptInvitation/AcceptInvitationUserDetailsForms.vue
index 7b3d4c090..e54a287eb 100644
--- a/src/pages/acceptInvitation/AcceptInvitationUserDetailsForms.vue
+++ b/src/pages/acceptInvitation/AcceptInvitationUserDetailsForms.vue
@@ -22,7 +22,8 @@
 				></FormDisplayItemBasic>
 				<Icon
 					v-if="store.acceptInvitationPayload.orcid"
-					icon="orcid"
+					icon="Orcid"
+					class="h-4 w-4"
 					:inline="true"
 				/>
 			</div>
diff --git a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
index cc6a18e77..094398c10 100644
--- a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
+++ b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
@@ -22,7 +22,8 @@
 
 			<Icon
 				v-if="store.invitationPayload.orcidValidation"
-				icon="orcid"
+				icon="Orcid"
+				class="h-4 w-4"
 				:inline="true"
 			/>