From a67fd26f7fca5db4b5a0cc3ef3ddc330390ffb64 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Wed, 20 Nov 2024 23:05:24 +0800
Subject: [PATCH] pkp/pkp-lib#9626 Migrate icons to svg (#414)

* pkp/pkp-lib#9626 Update Expand, Orcid and UsefulTips icons based on new icon designs from Figma

* pkp/pkp-lib#9626 Add new icons

* pkp/pkp-lib#9626 Add InitialsAvatar component

* pkp/pkp-lib#9262 Add Checkbox icons

* pkp/pkp-lib#9626 Update svg for StarTicked icon

* pkp/pkp-lib#9626 Use svg icons for components that use Icon component

* pkp/pkp-lib#9626 Rename Sitemap icon filename

* pkp/pkp-lib#9626 Adjust vertical alignment of icons next to texts

* pkp/pkp-lib#9626 Add documentation for added new Tooltip props

* pkp/pkp-lib#9626 Update InitialsAvatar component

* pkp/pkp-lib#9626 Remove fontawesome support from icon component

* pkp/pkp-lib#9626 Use icon Orcid in UserInvitationManager component

* pkp/pkp-lib#9626 Use default colors for UsefulTips icon

* pkp/pkp-lib#9626 Remove props in UsefulTips icon

* pkp/pkp-lib#9626 Remove prop flex in Tooltip and HelpButton components

* pkp/pkp-lib#9626 Use align-middle for inline-block containers when displaying icons

* pkp/pkp-lib#9626 Revert removed aria-hidden prop in Modal component

* pkp/pkp-lib#9626 Use InitialsAvatar component to display isLoggedInAs icon
---
 src/components/Badge/Badge.stories.js         |   2 +-
 src/components/ButtonRow/ButtonRow.stories.js |   2 +-
 src/components/Composer/Composer.vue          |  16 +-
 .../Container/ManageEmailsPage.stories.js     |   2 +-
 src/components/Container/Page.stories.js      |  21 +--
 src/components/Container/Page.vue             |  10 --
 src/components/Container/StatsPage.stories.js |   7 +-
 .../Container/SubmissionWizardPage.stories.js |  13 +-
 src/components/DateRange/DateRange.vue        |  39 ++---
 src/components/Dropdown/Dropdown.stories.js   |   2 +-
 src/components/Expander/Expander.vue          |   5 +-
 .../FileAttacher/FileAttacherFileStage.vue    |   2 +-
 .../FileAttacher/FileAttacherLibrary.vue      |   2 +-
 .../FileAttacher/FileAttacherReviewFiles.vue  |   2 +-
 .../FileAttacher/FileAttacherUpload.vue       |   2 +-
 src/components/Filter/Filter.vue              |   2 +-
 src/components/Filter/FilterSlider.vue        |   7 +-
 .../Filter/FilterSliderMultirange.vue         |   4 +-
 src/components/Form/FieldError.vue            |   2 +-
 src/components/Form/Form.vue                  |   5 +-
 src/components/Form/FormErrors.vue            |   2 +-
 src/components/Form/FormPage.vue              |   6 +-
 .../Form/fields/FieldArchivingPn.vue          |   4 +-
 .../Form/fields/FieldBaseAutosuggest.vue      |  13 +-
 src/components/Form/fields/FieldColor.vue     |   4 +-
 src/components/Form/fields/FieldHtml.vue      |   2 +-
 .../Form/fields/FieldMetadataSetting.vue      |   2 +-
 src/components/Form/fields/FieldOptions.vue   |  10 +-
 src/components/Form/fields/FieldOrcid.vue     |   5 +-
 src/components/Form/fields/FieldPubId.vue     |  13 +-
 .../Form/fields/FieldRadioInput.vue           |   4 +-
 .../Form/fields/FieldRichTextarea.vue         |   4 +-
 src/components/Form/fields/FieldSelect.vue    |   1 +
 .../Form/fields/FieldSelectIssue.vue          |   1 +
 src/components/Form/fields/FieldSlider.vue    |   1 +
 src/components/Form/fields/FieldText.vue      |   1 +
 src/components/Form/fields/FieldTextarea.vue  |   1 +
 src/components/Form/fields/FieldUpload.vue    |   1 +
 .../Form/fields/FieldUploadImage.vue          |   1 +
 src/components/Icon/Icon.mdx                  |  13 +-
 src/components/Icon/Icon.stories.js           |  49 +++++-
 src/components/Icon/Icon.vue                  | 139 ++++++++++--------
 src/components/Icon/icons/AlignCenter.vue     |  32 ++++
 src/components/Icon/icons/AlignLeft.vue       |  17 +++
 src/components/Icon/icons/AlignRight.vue      |  17 +++
 src/components/Icon/icons/ArchivedFile.vue    |  59 ++++++++
 src/components/Icon/icons/Checkbox.vue        |   8 +
 src/components/Icon/icons/CheckboxTicked.vue  |   8 +
 src/components/Icon/icons/Comment.vue         |  17 +++
 src/components/Icon/icons/Declined.vue        |   8 +
 src/components/Icon/icons/Desktop.vue         |  17 +++
 src/components/Icon/icons/Download.vue        |  15 ++
 src/components/Icon/icons/Error.vue           |   8 +
 src/components/Icon/icons/Expand.vue          |  18 ++-
 src/components/Icon/icons/FileCode.vue        |  20 +++
 src/components/Icon/icons/FilePowerpoint.vue  |  24 +++
 src/components/Icon/icons/FileText.vue        |  92 ++++++++++++
 src/components/Icon/icons/Filter.vue          |  10 ++
 src/components/Icon/icons/Globe.vue           |  15 ++
 src/components/Icon/icons/Hdd.vue             |  16 ++
 src/components/Icon/icons/Lock.vue            |  10 ++
 src/components/Icon/icons/Minus.vue           |   9 ++
 src/components/Icon/icons/Money.vue           |  79 ++++++++++
 src/components/Icon/icons/NotVisible.vue      |  27 ++++
 src/components/Icon/icons/Orcid.vue           |  35 ++---
 src/components/Icon/icons/Paste.vue           |  15 ++
 src/components/Icon/icons/Photo.vue           |  22 +++
 src/components/Icon/icons/Pin.vue             |   8 +
 src/components/Icon/icons/Print.vue           |   8 +
 src/components/Icon/icons/Question.vue        |  10 ++
 .../Icon/icons/ReinstateReviewer.vue          |  27 ++++
 src/components/Icon/icons/Sitemap.vue         |   8 +
 src/components/Icon/icons/Star.vue            |  10 ++
 src/components/Icon/icons/StarTicked.vue      |   8 +
 src/components/Icon/icons/Unlock.vue          |  10 ++
 src/components/Icon/icons/Upload.vue          |  14 ++
 .../Icon/icons/UsefulTipsPrimary.vue          |  12 ++
 src/components/Icon/icons/User.vue            |  10 ++
 .../InitialsAvatar/InitialsAvatar.mdx         |  15 ++
 .../InitialsAvatar/InitialsAvatar.stories.js  |  48 ++++++
 .../InitialsAvatar/InitialsAvatar.vue         |  69 +++++++++
 src/components/List/List.stories.js           |   6 +-
 src/components/ListPanel/ListPanel.stories.js |   4 +-
 .../contributors/ContributorsListPanel.vue    |   2 +-
 src/components/ListPanel/doi/DoiListPanel.vue |   4 +-
 .../SelectSubmissionFileListItem.vue          |   2 +-
 .../SubmissionFilesListItem.vue               |   4 +-
 .../ListPanel/submissions/CatalogListItem.vue |  13 +-
 .../submissions/CatalogListPanel.vue          |   6 +-
 .../submissions/SubmissionsListItem.vue       |  64 ++++----
 .../submissions/SubmissionsListPanel.vue      |   4 +-
 .../users/SelectReviewerListItem.vue          |  86 ++++++-----
 .../users/SelectReviewerListPanel.vue         |   6 +-
 src/components/Modal/Modal.stories.js         |   4 +-
 src/components/Modal/Modal.vue                |   8 +-
 .../MultilingualProgress.vue                  |  10 +-
 .../Notification/Notification.stories.js      |   8 +-
 src/components/Orderer/Orderer.vue            |  13 +-
 src/components/Panel/Panel.stories.js         |  80 +++++-----
 src/components/Search/Search.vue              |  50 ++-----
 src/components/Steps/Steps.vue                |  19 +--
 src/components/Tabs/Tabs.stories.js           |   2 +-
 src/components/Tabs/Tabs.vue                  |   2 +-
 src/components/Tooltip/Tooltip.stories.js     |   7 +
 src/components/Tooltip/Tooltip.vue            |  33 ++++-
 src/docs/guide/Accessibility.mdx              |   4 +-
 .../UserInvitationManager.vue                 |  25 ++--
 .../AcceptInvitationUserDetailsForms.vue      |   3 +-
 .../PublicationsDownloadReportModal.vue       |   2 +-
 .../UserInvitationDetailsFormStep.vue         |   3 +-
 110 files changed, 1308 insertions(+), 445 deletions(-)
 create mode 100644 src/components/Icon/icons/AlignCenter.vue
 create mode 100644 src/components/Icon/icons/AlignLeft.vue
 create mode 100644 src/components/Icon/icons/AlignRight.vue
 create mode 100644 src/components/Icon/icons/ArchivedFile.vue
 create mode 100644 src/components/Icon/icons/Checkbox.vue
 create mode 100644 src/components/Icon/icons/CheckboxTicked.vue
 create mode 100644 src/components/Icon/icons/Comment.vue
 create mode 100644 src/components/Icon/icons/Declined.vue
 create mode 100644 src/components/Icon/icons/Desktop.vue
 create mode 100644 src/components/Icon/icons/Download.vue
 create mode 100644 src/components/Icon/icons/Error.vue
 create mode 100644 src/components/Icon/icons/FileCode.vue
 create mode 100644 src/components/Icon/icons/FilePowerpoint.vue
 create mode 100644 src/components/Icon/icons/FileText.vue
 create mode 100644 src/components/Icon/icons/Filter.vue
 create mode 100644 src/components/Icon/icons/Globe.vue
 create mode 100644 src/components/Icon/icons/Hdd.vue
 create mode 100644 src/components/Icon/icons/Lock.vue
 create mode 100644 src/components/Icon/icons/Minus.vue
 create mode 100644 src/components/Icon/icons/Money.vue
 create mode 100644 src/components/Icon/icons/NotVisible.vue
 create mode 100644 src/components/Icon/icons/Paste.vue
 create mode 100644 src/components/Icon/icons/Photo.vue
 create mode 100644 src/components/Icon/icons/Pin.vue
 create mode 100644 src/components/Icon/icons/Print.vue
 create mode 100644 src/components/Icon/icons/Question.vue
 create mode 100644 src/components/Icon/icons/ReinstateReviewer.vue
 create mode 100644 src/components/Icon/icons/Sitemap.vue
 create mode 100644 src/components/Icon/icons/Star.vue
 create mode 100644 src/components/Icon/icons/StarTicked.vue
 create mode 100644 src/components/Icon/icons/Unlock.vue
 create mode 100644 src/components/Icon/icons/Upload.vue
 create mode 100644 src/components/Icon/icons/UsefulTipsPrimary.vue
 create mode 100644 src/components/Icon/icons/User.vue
 create mode 100644 src/components/InitialsAvatar/InitialsAvatar.mdx
 create mode 100644 src/components/InitialsAvatar/InitialsAvatar.stories.js
 create mode 100644 src/components/InitialsAvatar/InitialsAvatar.vue

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 87abe7085..62d1e29d0 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';
 		},
 
 		/**
@@ -1158,14 +1158,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..92377df5b 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,13 @@ export const Default = {
 						</div>
 						<Dropdown class="app__headerAction app__userNav">
 							<template #button>
-								<Icon icon="user-circle-o" />
-								<Icon
+								<InitialsAvatar :is-secondary="true" given-name="Test" family-name="User"></InitialsAvatar>
+								<InitialsAvatar
 									v-if="isLoggedInAs"
-									icon="user-circle"
-									class="app__userNav__isLoggedInAsWarning"
-								/>
+									class="absolute right-2 top-2 rounded-full h-5 w-5"
+									:is-warnable="true"
+									:shrink="true"
+								></InitialsAvatar>
 								<span class="-screenReader">Options for {{ currentUsername }}</span>
 							</template>
 							<div v-if="isLoggedInAs" class="pkpDropdown__section">
@@ -96,7 +98,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..52ef5e423 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>
@@ -130,6 +130,7 @@ const EditorialStatsPageWithDataAndTemplate = {
 										v-if="row.description"
 										:label="'Description for ' + row.name"
 										:tooltip="row.description"
+										icon-size="small"
 									></Tooltip>
 								</TableCell>
 								<TableCell>{{ row.dateRange }}</TableCell>
@@ -400,7 +401,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 +419,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..13d6075d2 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,9 +65,9 @@
 					</label>
 				</fieldset>
 				<PkpButton @click="applyCustomRange">{{ applyLabel }}</PkpButton>
-				<div v-if="errorMessage" class="pkpDateRange__error">
-					<Icon icon="exclamation-triangle" :inline="true" />
-					<span v-html="errorMessage" />
+				<div v-if="errorMessage" class="pt-2 text-base-normal">
+					<Icon icon="Error" class="me-1 h-5 w-5" :inline="true" />
+					<span class="align-middle" v-html="errorMessage" />
 				</div>
 			</form>
 		</div>
@@ -452,25 +456,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 +545,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/FieldArchivingPn.vue b/src/components/Form/fields/FieldArchivingPn.vue
index b50c3ad16..8fee80538 100644
--- a/src/components/Form/fields/FieldArchivingPn.vue
+++ b/src/components/Form/fields/FieldArchivingPn.vue
@@ -5,11 +5,11 @@
 	>
 		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index 5d6a0c7cd..3e12db31f 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -14,6 +14,7 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
@@ -92,10 +93,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 +520,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/FieldColor.vue b/src/components/Form/fields/FieldColor.vue
index cc1403303..a07b96507 100644
--- a/src/components/Form/fields/FieldColor.vue
+++ b/src/components/Form/fields/FieldColor.vue
@@ -2,11 +2,11 @@
 	<fieldset class="pkpFormField pkpFormField--color">
 		<legend class="pkpFormField__heading--legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
diff --git a/src/components/Form/fields/FieldHtml.vue b/src/components/Form/fields/FieldHtml.vue
index a16af1e3b..a0c9b041d 100644
--- a/src/components/Form/fields/FieldHtml.vue
+++ b/src/components/Form/fields/FieldHtml.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
 		<div class="pkpFormField__heading">
-			<span class="pkpFormFieldLabel">
+			<span class="pkpFormFieldLabel align-middle">
 				{{ label }}
 			</span>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
diff --git a/src/components/Form/fields/FieldMetadataSetting.vue b/src/components/Form/fields/FieldMetadataSetting.vue
index 0a28536c6..df87d94dc 100644
--- a/src/components/Form/fields/FieldMetadataSetting.vue
+++ b/src/components/Form/fields/FieldMetadataSetting.vue
@@ -1,7 +1,7 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options pkpFormField--metadata">
 		<legend class="pkpFormField--options__legend">
-			{{ label }}
+			<span class="align-middle">{{ label }}</span>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
diff --git a/src/components/Form/fields/FieldOptions.vue b/src/components/Form/fields/FieldOptions.vue
index 33b87c56d..5648a7c60 100644
--- a/src/components/Form/fields/FieldOptions.vue
+++ b/src/components/Form/fields/FieldOptions.vue
@@ -2,11 +2,11 @@
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
 		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
@@ -238,12 +238,12 @@ export default {
 		 */
 		if (this.isOrderable && this.selectedValue?.length) {
 			this.localizedOptions = this.localizedOptions.sort((a, b) => {
-				let aIndex = this.selectedValue.findIndex(value => a.value === value);
-				let bIndex = this.selectedValue.findIndex(value => b.value === value);
+				let aIndex = this.selectedValue.findIndex((value) => a.value === value);
+				let bIndex = this.selectedValue.findIndex((value) => b.value === value);
 				aIndex = aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex;
 				bIndex = bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex;
 				return aIndex < bIndex ? -1 : 1;
-			})
+			});
 		}
 	},
 	methods: {
diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
index ebb43edf4..9c2f566a8 100644
--- a/src/components/Form/fields/FieldOrcid.vue
+++ b/src/components/Form/fields/FieldOrcid.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
 		<div class="pkpFormField__heading">
-			<span class="pkpFormFieldLabel">
+			<span class="pkpFormFieldLabel align-middle">
 				{{ label }}
 			</span>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
@@ -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..da05f8fb3 100644
--- a/src/components/Form/fields/FieldPubId.vue
+++ b/src/components/Form/fields/FieldPubId.vue
@@ -6,6 +6,7 @@
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
+				class="align-middle"
 			/>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
@@ -58,10 +59,10 @@
 			<div
 				v-if="pattern && !canGenerateId && !currentValue"
 				:id="describedByDescriptionId"
-				class="pkpFormField--pubid__warning"
+				class="mt-1 text-base-normal"
 			>
-				<Icon icon="exclamation-triangle" :inline="true" />
-				{{ missingPartsLabel }}
+				<Icon icon="Error" class="h-4 w-4" :inline="true" />
+				<span class="align-middle">{{ missingPartsLabel }}</span>
 			</div>
 			<FieldError
 				v-if="errors && errors.length"
@@ -259,10 +260,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/FieldRadioInput.vue b/src/components/Form/fields/FieldRadioInput.vue
index 39cac59b1..198f8fcba 100644
--- a/src/components/Form/fields/FieldRadioInput.vue
+++ b/src/components/Form/fields/FieldRadioInput.vue
@@ -2,11 +2,11 @@
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
 		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue
index 073fcc545..bfce04b17 100644
--- a/src/components/Form/fields/FieldRichTextarea.vue
+++ b/src/components/Form/fields/FieldRichTextarea.vue
@@ -11,6 +11,7 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
@@ -66,7 +67,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/Form/fields/FieldSelect.vue b/src/components/Form/fields/FieldSelect.vue
index 2027fb0e6..a915f2be4 100644
--- a/src/components/Form/fields/FieldSelect.vue
+++ b/src/components/Form/fields/FieldSelect.vue
@@ -8,6 +8,7 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
diff --git a/src/components/Form/fields/FieldSelectIssue.vue b/src/components/Form/fields/FieldSelectIssue.vue
index 7a1a71483..a75731174 100644
--- a/src/components/Form/fields/FieldSelectIssue.vue
+++ b/src/components/Form/fields/FieldSelectIssue.vue
@@ -6,6 +6,7 @@
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
+				class="align-middle"
 			/>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
diff --git a/src/components/Form/fields/FieldSlider.vue b/src/components/Form/fields/FieldSlider.vue
index 73d02c7ea..ee8be1b97 100644
--- a/src/components/Form/fields/FieldSlider.vue
+++ b/src/components/Form/fields/FieldSlider.vue
@@ -8,6 +8,7 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
diff --git a/src/components/Form/fields/FieldText.vue b/src/components/Form/fields/FieldText.vue
index 5e62789c5..4144eba24 100644
--- a/src/components/Form/fields/FieldText.vue
+++ b/src/components/Form/fields/FieldText.vue
@@ -8,6 +8,7 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
diff --git a/src/components/Form/fields/FieldTextarea.vue b/src/components/Form/fields/FieldTextarea.vue
index 251f2070e..f4af33e27 100644
--- a/src/components/Form/fields/FieldTextarea.vue
+++ b/src/components/Form/fields/FieldTextarea.vue
@@ -8,6 +8,7 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
diff --git a/src/components/Form/fields/FieldUpload.vue b/src/components/Form/fields/FieldUpload.vue
index efeb39fd3..2188e8ddd 100644
--- a/src/components/Form/fields/FieldUpload.vue
+++ b/src/components/Form/fields/FieldUpload.vue
@@ -8,6 +8,7 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
diff --git a/src/components/Form/fields/FieldUploadImage.vue b/src/components/Form/fields/FieldUploadImage.vue
index bdfe75b14..7e5745db7 100644
--- a/src/components/Form/fields/FieldUploadImage.vue
+++ b/src/components/Form/fields/FieldUploadImage.vue
@@ -8,6 +8,7 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
diff --git a/src/components/Icon/Icon.mdx b/src/components/Icon/Icon.mdx
index 316289b7c..c8baec01f 100644
--- a/src/components/Icon/Icon.mdx
+++ b/src/components/Icon/Icon.mdx
@@ -10,7 +10,7 @@ import * as IconStories from './Icon.stories.js';
 
 Use this component to display an icon. Use icons when you want to visually connect two parts of the UI that are not otherwise connected. For example, the [ListPanel](#/component/ListPanel) filters use an icon to link the button with the panel it controls.
 
-Use any [FontAwesome v4 icon](https://fontawesome.com/v4/icons/).
+Use any icons from our [Icon Gallery](?path=/story/components-icon--icon-gallery).
 
 ## Be careful when using icon-only labels
 
@@ -22,14 +22,15 @@ When adding buttons or other controls, do not add an icon when the text label su
 
 ## Help Icon
 
-The `info-circle` icon is reserved for providing help on how to use the software.
+The `Help` icon is reserved for providing information on how to use the software.
 
-<Story of={IconStories.InfoCircle} />
-## Warning Icon
+<Story of={IconStories.Help} />
 
-The `exclamation-triangle` icon is reserved for warning the user about an error, urgent information, or a serious consequence of an expected action.
+## Error / Warning Icon
 
-<Story of={IconStories.ExclamationTriangle} />
+The `Error` icon is reserved for warning the user about an error, urgent information, or a serious consequence of an expected action.
+
+<Story of={IconStories.Error} />
 
 <Primary />
 <Controls />
diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
index 7afae93da..580f440c3 100644
--- a/src/components/Icon/Icon.stories.js
+++ b/src/components/Icon/Icon.stories.js
@@ -14,16 +14,16 @@ export default {
 	}),
 };
 
-export const Bug = {
-	args: {icon: 'bug'},
+export const UsefulTips = {
+	args: {icon: 'UsefulTips', class: 'h-5 w-5'},
 };
 
-export const InfoCircle = {
-	args: {icon: 'Help', class: 'w-5 h-5'},
+export const Help = {
+	args: {icon: 'Help', class: 'h-5 w-5'},
 };
 
-export const ExclamationTriangle = {
-	args: {icon: 'exclamation-triangle'},
+export const Error = {
+	args: {icon: 'Error', class: 'h-5 w-5'},
 };
 
 export const InlineIcon = {
@@ -37,10 +37,10 @@ export const InlineIcon = {
 		`,
 	}),
 
-	args: {icon: 'search', inline: true},
+	args: {icon: 'Search', class: 'h-5 w-5', inline: true},
 };
 
-export const iconGallery = {
+export const IconGallery = {
 	render: (args) => ({
 		components: {Icon},
 		setup() {
@@ -59,8 +59,12 @@ export const iconGallery = {
 	args: {
 		icons: [
 			'Add',
+			'AlignCenter',
+			'AlignLeft',
+			'AlignRight',
 			'Announcements',
 			'AnonymousReview',
+			'ArchivedFile',
 			'ArrowLeft',
 			'ArrowRight',
 			'AttachFile',
@@ -72,31 +76,44 @@ export const iconGallery = {
 			'Calendar',
 			'Cancel',
 			'Catalog',
+			'Checkbox',
+			'CheckboxTicked',
 			'ChevronDown',
 			'ChevronLeft',
 			'ChevronRight',
 			'ChevronUp',
 			'Clock',
+			'Comment',
 			'Complete',
 			'Dashboard',
+			'Declined',
 			'DefaultDocument',
 			'DecreaseTextSize',
+			'Desktop',
 			'DisableUser',
+			'Download',
 			'Dropdown',
 			'Dropup',
 			'Edit',
 			'Email',
 			'EmailOpened',
+			'Error',
 			'Expand',
 			'FileAudio',
+			'FileCode',
 			'FileDoc',
 			'FileEpub',
 			'FileExcel',
 			'FileHtml',
 			'FileImage',
 			'FilePdf',
+			'FilePowerpoint',
+			'FileText',
 			'FileVideo',
 			'FileZip',
+			'Filter',
+			'Globe',
+			'Hdd',
 			'Help',
 			'History',
 			'InProgress',
@@ -105,31 +122,47 @@ export const iconGallery = {
 			'Institutes',
 			'Issues',
 			'Italics',
+			'Lock',
 			'LoginAs',
 			'MergeUser',
+			'Minus',
+			'Money',
 			'MoreOptions',
 			'MySubmissions',
 			'NavDoi',
 			'NavAdmin',
 			'New',
 			'Notifications',
+			'NotVisible',
 			'OpenReview',
 			'Orcid',
 			'Overdue',
+			'Paste',
 			'Payment',
+			'Photo',
+			'Pin',
+			'Print',
 			'Publication',
+			'Question',
 			'ReadRecommendation',
+			'ReinstateReviewer',
 			'ReviewAssignments',
 			'ReviewRequestDeclined',
 			'ReviewSent',
 			'Search',
 			'Settings',
+			'Sitemap',
 			'Sort',
+			'Star',
+			'StarTicked',
 			'Statistics',
 			'Tools',
 			'Underline',
+			'Unlock',
+			'Upload',
 			'Url',
 			'UsefulTips',
+			'User',
 			'View',
 			'Workflow',
 		],
diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index a67339d1d..d7f658560 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -1,44 +1,18 @@
 <template>
-	<svg
-		v-if="icon === 'orcid'"
-		class="pkpIcon--orcid"
-		:class="classes"
-		viewBox="0 0 256 256"
-		aria-hidden="true"
-	>
-		<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]">
+	<span :class="classes">
 		<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';
+import AlignCenter from './icons/AlignCenter.vue';
+import AlignLeft from './icons/AlignLeft.vue';
+import AlignRight from './icons/AlignRight.vue';
 import Announcements from './icons/Announcements.vue';
 import AnonymousReview from './icons/AnonymousReview.vue';
+import ArchivedFile from './icons/ArchivedFile.vue';
 import ArrowLeft from './icons/ArrowLeft.vue';
 import ArrowRight from './icons/ArrowRight.vue';
 import AttachFile from './icons/AttachFile.vue';
@@ -50,31 +24,44 @@ 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';
 import ChevronUp from './icons/ChevronUp.vue';
 import Clock from './icons/Clock.vue';
+import Comment from './icons/Comment.vue';
 import Complete from './icons/Complete.vue';
 import Dashboard from './icons/Dashboard.vue';
+import Declined from './icons/Declined.vue';
 import DecreaseTextSize from './icons/DecreaseTextSize.vue';
+import Desktop from './icons/Desktop.vue';
 import DisableUser from './icons/DisableUser.vue';
+import Download from './icons/Download.vue';
 import Dropdown from './icons/Dropdown.vue';
 import Dropup from './icons/Dropup.vue';
 import Edit from './icons/Edit.vue';
 import Email from './icons/Email.vue';
 import EmailOpened from './icons/EmailOpened.vue';
+import Error from './icons/Error.vue';
 import Expand from './icons/Expand.vue';
 import DefaultDocument from './icons/DefaultDocument.vue';
 import FileAudio from './icons/FileAudio.vue';
+import FileCode from './icons/FileCode.vue';
 import FileDoc from './icons/FileDoc.vue';
 import FileEpub from './icons/FileEpub.vue';
 import FileExcel from './icons/FileExcel.vue';
 import FileHtml from './icons/FileHtml.vue';
 import FileImage from './icons/FileImage.vue';
 import FilePdf from './icons/FilePdf.vue';
+import FilePowerpoint from './icons/FilePowerpoint.vue';
+import FileText from './icons/FileText.vue';
 import FileVideo from './icons/FileVideo.vue';
 import FileZip from './icons/FileZip.vue';
+import Filter from './icons/Filter.vue';
+import Globe from './icons/Globe.vue';
+import Hdd from './icons/Hdd.vue';
 import Help from './icons/Help.vue';
 import History from './icons/History.vue';
 import InProgress from './icons/InProgress.vue';
@@ -83,38 +70,59 @@ import InsertContent from './icons/InsertContent.vue';
 import Institutes from './icons/Institutes.vue';
 import Issues from './icons/Issues.vue';
 import Italics from './icons/Italics.vue';
+import Lock from './icons/Lock.vue';
 import LoginAs from './icons/LoginAs.vue';
 import MergeUser from './icons/MergeUser.vue';
+import Minus from './icons/Minus.vue';
+import Money from './icons/Money.vue';
 import MoreOptions from './icons/MoreOptions.vue';
 import MySubmissions from './icons/MySubmissions.vue';
 import NavDoi from './icons/NavDoi.vue';
 import NavAdmin from './icons/NavAdmin.vue';
 import New from './icons/New.vue';
 import Notifications from './icons/Notifications.vue';
+import NotVisible from './icons/NotVisible.vue';
 import OpenReview from './icons/OpenReview.vue';
 import Orcid from './icons/Orcid.vue';
 import Overdue from './icons/Overdue.vue';
+import Paste from './icons/Paste.vue';
 import Payment from './icons/Payment.vue';
+import Photo from './icons/Photo.vue';
+import Pin from './icons/Pin.vue';
+import Print from './icons/Print.vue';
 import Publication from './icons/Publication.vue';
+import Question from './icons/Question.vue';
 import ReadRecommendation from './icons/ReadRecommendation.vue';
+import ReinstateReviewer from './icons/ReinstateReviewer.vue';
 import ReviewAssignments from './icons/ReviewAssignments.vue';
 import ReviewRequestDeclined from './icons/ReviewRequestDeclined.vue';
 import ReviewSent from './icons/ReviewSent.vue';
 import Search from './icons/Search.vue';
 import Settings from './icons/Settings.vue';
+import Sitemap from './icons/Sitemap.vue';
 import Sort from './icons/Sort.vue';
+import Star from './icons/Star.vue';
+import StarTicked from './icons/StarTicked.vue';
 import Statistics from './icons/Statistics.vue';
 import Tools from './icons/Tools.vue';
 import Underline from './icons/Underline.vue';
+import Unlock from './icons/Unlock.vue';
+import Upload from './icons/Upload.vue';
 import Url from './icons/Url.vue';
 import UsefulTips from './icons/UsefulTips.vue';
+import UsefulTipsPrimary from './icons/UsefulTipsPrimary.vue';
+import User from './icons/User.vue';
 import View from './icons/View.vue';
 import Workflow from './icons/Workflow.vue';
 
 const svgIcons = {
 	Add,
+	AlignCenter,
+	AlignLeft,
+	AlignRight,
 	Announcements,
 	AnonymousReview,
+	ArchivedFile,
 	ArrowLeft,
 	ArrowRight,
 	AttachFile,
@@ -126,31 +134,44 @@ const svgIcons = {
 	Calendar,
 	Cancel,
 	Catalog,
+	Checkbox,
+	CheckboxTicked,
 	ChevronDown,
 	ChevronLeft,
 	ChevronRight,
 	ChevronUp,
 	Clock,
+	Comment,
 	Complete,
 	Dashboard,
+	Declined,
 	DefaultDocument,
 	DecreaseTextSize,
+	Desktop,
 	DisableUser,
+	Download,
 	Dropdown,
 	Dropup,
 	Edit,
 	Email,
 	EmailOpened,
+	Error,
 	Expand,
 	FileAudio,
 	FileDoc,
+	FileCode,
 	FileEpub,
 	FileExcel,
 	FileHtml,
 	FileImage,
 	FilePdf,
+	FilePowerpoint,
+	FileText,
 	FileVideo,
 	FileZip,
+	Filter,
+	Globe,
+	Hdd,
 	Help,
 	History,
 	InProgress,
@@ -159,54 +180,65 @@ const svgIcons = {
 	Institutes,
 	Issues,
 	Italics,
+	Lock,
 	LoginAs,
 	MergeUser,
+	Minus,
+	Money,
 	MoreOptions,
 	MySubmissions,
 	NavDoi,
 	NavAdmin,
 	New,
 	Notifications,
+	NotVisible,
 	OpenReview,
 	Orcid,
 	Overdue,
+	Paste,
 	Payment,
+	Photo,
+	Pin,
+	Print,
 	Publication,
+	Question,
 	ReadRecommendation,
+	ReinstateReviewer,
 	ReviewAssignments,
 	ReviewRequestDeclined,
 	ReviewSent,
 	Search,
 	Settings,
+	Sitemap,
 	Sort,
+	Star,
+	StarTicked,
 	Statistics,
 	Tools,
 	Underline,
+	Unlock,
+	Upload,
 	Url,
 	UsefulTips,
+	UsefulTipsPrimary,
+	User,
 	View,
 	Workflow,
 };
 
 const props = defineProps({
-	/** Which <a href="https://fontawesome.com/">FontAwesome</a> icon to use. Drop the `fa-` prefix from the class name.
-	 * If you want to use `fa-bug`, the value of this prop should be `bug`.  */
-	icon: String,
+	/** Which icon to use from our [Icon Gallery](?path=/story/components-icon--icon-gallery) */
+	icon: {type: String, required: true},
 	/** Use when an icon sits alongside text to ensure adequate spacing between the icon and text. */
 	inline: Boolean,
 });
 
-const isSvgIcon = computed(() => !!svgIcons[props.icon]);
-
 const classes = computed(() => {
-	let classes = [];
-	if (props.icon !== 'orcid') {
-		classes.push('fa-' + props.icon);
-	}
-	if (props.inline) {
-		classes.push('pkpIcon--inline');
-	}
-	return classes;
+	return {
+		'inline-block align-middle rtl:scale-x-[-1]': true,
+		'text-negative': props.icon === 'Error',
+		'pkpIcon--inline': props.inline,
+	};
 });
 </script>
 
@@ -230,23 +262,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/Icon/icons/AlignCenter.vue b/src/components/Icon/icons/AlignCenter.vue
new file mode 100644
index 000000000..5363fb136
--- /dev/null
+++ b/src/components/Icon/icons/AlignCenter.vue
@@ -0,0 +1,32 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_339_392)">
+			<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01" />
+			<path
+				d="M21.2 8.80005H3.20001"
+				stroke="currentColor"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M21.2 2.80005H3.20001"
+				stroke="currentColor"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M21.2 14.8H3.20001"
+				stroke="currentColor"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M21.2 20.8H3.20001"
+				stroke="currentColor"
+				stroke-linejoin="round"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_339_392">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/AlignLeft.vue b/src/components/Icon/icons/AlignLeft.vue
new file mode 100644
index 000000000..a1529e6eb
--- /dev/null
+++ b/src/components/Icon/icons/AlignLeft.vue
@@ -0,0 +1,17 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_339_391)">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M2 3H22V4H2V3ZM2 10H14V9H2V10ZM2 16H22V15H2V16ZM2 22H14V21H2V22Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_339_391">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/AlignRight.vue b/src/components/Icon/icons/AlignRight.vue
new file mode 100644
index 000000000..3cc2a4098
--- /dev/null
+++ b/src/components/Icon/icons/AlignRight.vue
@@ -0,0 +1,17 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_339_393)">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M2 3H22V4H2V3ZM10 10H22V9H10V10ZM2 16H22V15H2V16ZM10 22H22V21H10V22Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_339_393">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ArchivedFile.vue b/src/components/Icon/icons/ArchivedFile.vue
new file mode 100644
index 000000000..18ccb3f23
--- /dev/null
+++ b/src/components/Icon/icons/ArchivedFile.vue
@@ -0,0 +1,59 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_339_506)">
+			<path
+				d="M17.4127 13.9246L16.4714 15.8067H7.5286L6.58735 13.9237H1.88063C1.69504 13.9238 1.51128 13.9604 1.33986 14.0315C1.16843 14.1026 1.01271 14.2069 0.881588 14.3382C0.750465 14.4695 0.646513 14.6254 0.575676 14.797C0.504839 14.9685 0.468505 15.1523 0.468751 15.3379V20.985C0.468875 21.3594 0.617666 21.7184 0.882417 21.9832C1.14717 22.2479 1.50621 22.3967 1.88063 22.3968H22.1194C22.4938 22.3967 22.8528 22.2479 23.1176 21.9832C23.3823 21.7184 23.5311 21.3594 23.5313 20.985V15.3379C23.5313 14.9634 23.3825 14.6043 23.1178 14.3394C22.853 14.0746 22.4939 13.9257 22.1194 13.9256L17.4127 13.9246Z"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M16.942 18.1608H7.05798C6.53814 18.1608 6.11673 18.5822 6.11673 19.102C6.11673 19.6219 6.53814 20.0433 7.05798 20.0433H16.942C17.4619 20.0433 17.8833 19.6219 17.8833 19.102C17.8833 18.5822 17.4619 18.1608 16.942 18.1608Z"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M17.8833 2.62872H20.0114C20.3396 2.62881 20.6576 2.74322 20.9106 2.95228C21.1637 3.16135 21.336 3.45202 21.398 3.77435L23.5312 14.8659"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M0.46875 14.8659L2.60156 3.77437C2.65659 3.48832 2.79875 3.22629 3.00855 3.02421C3.21836 2.82213 3.48553 2.68989 3.77344 2.64562L6.11719 2.64093"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M3.29251 13.9247V11.9559C3.29251 11.7705 3.32905 11.5869 3.40003 11.4155C3.47101 11.2442 3.57505 11.0885 3.70621 10.9574C3.83736 10.8263 3.99306 10.7223 4.16441 10.6514C4.33576 10.5805 4.51941 10.544 4.70485 10.5441H19.2952C19.4806 10.544 19.6643 10.5805 19.8356 10.6514C20.007 10.7223 20.1627 10.8263 20.2938 10.9574C20.425 11.0885 20.529 11.2442 20.6 11.4155C20.671 11.5869 20.7075 11.7705 20.7075 11.9559V13.9247"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M4.23422 10.5464V8.97747C4.23416 8.79202 4.27063 8.60837 4.34156 8.43702C4.41249 8.26567 4.51647 8.10997 4.64759 7.97882C4.7787 7.84766 4.93436 7.74363 5.10569 7.67264C5.27702 7.60166 5.46065 7.56512 5.6461 7.56512H18.3539C18.5394 7.56512 18.723 7.60166 18.8943 7.67264C19.0656 7.74363 19.2213 7.84766 19.3524 7.97882C19.4835 8.10997 19.5875 8.26567 19.6584 8.43702C19.7294 8.60837 19.7658 8.79202 19.7658 8.97747V10.5464"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M5.17548 7.56513V5.99623C5.17548 5.81082 5.212 5.62722 5.28295 5.45592C5.3539 5.28463 5.4579 5.12898 5.589 4.99788C5.85378 4.7331 6.2129 4.58435 6.58735 4.58435H17.4127C17.5981 4.58435 17.7817 4.62087 17.953 4.69182C18.1243 4.76278 18.2799 4.86677 18.411 4.99788C18.5421 5.12898 18.6461 5.28463 18.7171 5.45592C18.788 5.62722 18.8245 5.81082 18.8245 5.99623V7.56513"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M6.11673 4.58436V3.01545C6.11685 2.64104 6.26564 2.28199 6.5304 2.01724C6.79515 1.75249 7.15419 1.6037 7.5286 1.60358H16.4714C16.8458 1.6037 17.2049 1.75249 17.4696 2.01724C17.7344 2.28199 17.8832 2.64104 17.8833 3.01545V4.58436"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_339_506">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Checkbox.vue b/src/components/Icon/icons/Checkbox.vue
new file mode 100644
index 000000000..790f01059
--- /dev/null
+++ b/src/components/Icon/icons/Checkbox.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM4.5 19.5V4.5H19.5V19.5H4.5Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/CheckboxTicked.vue b/src/components/Icon/icons/CheckboxTicked.vue
new file mode 100644
index 000000000..d98990140
--- /dev/null
+++ b/src/components/Icon/icons/CheckboxTicked.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M18.75 2.25H5.25C4.45462 2.25087 3.69206 2.56722 3.12964 3.12964C2.56722 3.69206 2.25087 4.45462 2.25 5.25V18.75C2.25087 19.5454 2.56722 20.3079 3.12964 20.8704C3.69206 21.4328 4.45462 21.7491 5.25 21.75H18.75C19.5454 21.7491 20.3079 21.4328 20.8704 20.8704C21.4328 20.3079 21.7491 19.5454 21.75 18.75V5.25C21.7491 4.45462 21.4328 3.69206 20.8704 3.12964C20.3079 2.56722 19.5454 2.25087 18.75 2.25ZM17.0742 8.73234L10.7742 16.2323C10.7051 16.3147 10.6191 16.3812 10.5221 16.4273C10.425 16.4735 10.3192 16.4983 10.2117 16.5H10.1991C10.0939 16.5 9.99 16.4778 9.89398 16.435C9.79797 16.3922 9.71202 16.3297 9.64172 16.2516L6.94172 13.2516C6.87315 13.1788 6.81981 13.0931 6.78483 12.9995C6.74986 12.9059 6.73395 12.8062 6.73805 12.7063C6.74215 12.6064 6.76617 12.5084 6.8087 12.4179C6.85124 12.3275 6.91142 12.2464 6.98572 12.1796C7.06002 12.1127 7.14694 12.0614 7.24136 12.0286C7.33579 11.9958 7.43581 11.9822 7.53556 11.9886C7.63531 11.995 7.73277 12.0213 7.82222 12.0659C7.91166 12.1106 7.99128 12.1726 8.05641 12.2484L10.1794 14.6072L15.9258 7.76766C16.0547 7.61863 16.237 7.52632 16.4335 7.51066C16.6299 7.49501 16.8246 7.55728 16.9754 7.68402C17.1263 7.81075 17.2212 7.99176 17.2397 8.18793C17.2582 8.3841 17.1988 8.57966 17.0742 8.73234Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Comment.vue b/src/components/Icon/icons/Comment.vue
new file mode 100644
index 000000000..2d0090f8a
--- /dev/null
+++ b/src/components/Icon/icons/Comment.vue
@@ -0,0 +1,17 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_336_651)">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M12 19.5C11.124 19.5 10.278 19.398 9.465 19.2247L5.934 21.3473L5.98125 17.868C3.2745 16.2405 1.5 13.5495 1.5 10.5C1.5 5.52975 6.201 1.5 12 1.5C17.799 1.5 22.5 5.52975 22.5 10.5C22.5 15.471 17.799 19.5 12 19.5ZM12 0C5.373 0 0 4.70175 0 10.5C0 13.8142 1.75875 16.7655 4.5 18.6893V24L9.75675 20.8103C10.4843 20.9303 11.2327 21 12 21C18.627 21 24 16.299 24 10.5C24 4.70175 18.627 0 12 0Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_336_651">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Declined.vue b/src/components/Icon/icons/Declined.vue
new file mode 100644
index 000000000..320c656ad
--- /dev/null
+++ b/src/components/Icon/icons/Declined.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M12 4C7.6 4 4 7.6 4 12C4 16.4 7.6 20 12 20C16.4 20 20 16.4 20 12C20 7.6 16.4 4 12 4ZM12 5.77778C13.3778 5.77778 14.6667 6.26667 15.7333 7.02222L7.02222 15.7333C6.26667 14.6667 5.77778 13.3778 5.77778 12C5.77778 8.57778 8.57778 5.77778 12 5.77778ZM12 18.2222C10.6222 18.2222 9.33333 17.7333 8.26667 16.9778L16.9778 8.26667C17.7333 9.33333 18.2222 10.6222 18.2222 12C18.2222 15.4222 15.4222 18.2222 12 18.2222Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Desktop.vue b/src/components/Icon/icons/Desktop.vue
new file mode 100644
index 000000000..eead4d26a
--- /dev/null
+++ b/src/components/Icon/icons/Desktop.vue
@@ -0,0 +1,17 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_339_400)">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M22.125 13.5H1.875V3C1.875 2.172 2.547 1.5 3.375 1.5H20.625C21.453 1.5 22.125 2.172 22.125 3V13.5ZM22.125 16.5C22.125 17.328 21.453 18 20.625 18H3.375C2.547 18 1.875 17.328 1.875 16.5V15H22.125V16.5ZM10.875 19.5H13.875V22.5H10.875V19.5ZM20.625 0H3.375C1.71825 0 0.375 1.34325 0.375 3V16.5C0.375 18.1567 1.71825 19.5 3.375 19.5H9.375V22.5H7.875C7.46025 22.5 7.125 22.836 7.125 23.25C7.125 23.6647 7.46025 24 7.875 24H16.875C17.2897 24 17.625 23.6647 17.625 23.25C17.625 22.836 17.2897 22.5 16.875 22.5H15.375V19.5H20.625C22.2817 19.5 23.625 18.1567 23.625 16.5V3C23.625 1.34325 22.2817 0 20.625 0Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_339_400">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Download.vue b/src/components/Icon/icons/Download.vue
new file mode 100644
index 000000000..abd7ad93a
--- /dev/null
+++ b/src/components/Icon/icons/Download.vue
@@ -0,0 +1,15 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M8 22.0002H16C18.8284 22.0002 20.2426 22.0002 21.1213 21.1215C22 20.2429 22 18.8286 22 16.0002V15.0002C22 12.1718 22 10.7576 21.1213 9.8789C20.3529 9.11051 19.175 9.01406 17 9.00195M7 9.00195C4.82497 9.01406 3.64706 9.11051 2.87868 9.87889C2 10.7576 2 12.1718 2 15.0002V16.0002C2 18.8286 2 20.2429 2.87868 21.1215C3.17848 21.4213 3.54062 21.6188 4 21.749"
+			stroke="currentColor"
+			stroke-linecap="round"
+		/>
+		<path
+			d="M12 2V15M12 15L9 11.5M12 15L15 11.5"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Error.vue b/src/components/Icon/icons/Error.vue
new file mode 100644
index 000000000..9c74baf94
--- /dev/null
+++ b/src/components/Icon/icons/Error.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M12.8849 3.4905C12.5389 2.8365 11.4629 2.8365 11.1169 3.4905L2.11694 20.4905C2.03592 20.6429 1.99575 20.8136 2.00036 20.9861C2.00496 21.1586 2.05417 21.327 2.14319 21.4749C2.23221 21.6227 2.35801 21.7449 2.50833 21.8297C2.65865 21.9145 2.82837 21.9588 3.00094 21.9585H21.0009C21.1734 21.9589 21.343 21.9145 21.4932 21.8298C21.6434 21.7451 21.7691 21.6229 21.8581 21.4752C21.947 21.3274 21.9961 21.1591 22.0007 20.9867C22.0052 20.8144 21.965 20.6437 21.8839 20.4915L12.8849 3.4905ZM13.0009 18.9585H11.0009V16.9585H13.0009V18.9585ZM11.0009 14.9585V9.9585H13.0009L13.0019 14.9585H11.0009Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Expand.vue b/src/components/Icon/icons/Expand.vue
index fe4051778..2fa6376de 100644
--- a/src/components/Icon/icons/Expand.vue
+++ b/src/components/Icon/icons/Expand.vue
@@ -1,9 +1,17 @@
 <template>
 	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<rect width="24" height="24" transform="matrix(-1 0 0 1 24 0)" />
-		<path
-			d="M7.91675 17.355L13.2601 12L7.91675 6.645L9.56175 5L16.5617 12L9.56175 19L7.91675 17.355Z"
-			fill="currentColor"
-		/>
+		<g clip-path="url(#clip0_339_325)">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M23.7637 0.225037C23.6272 0.0900366 23.4382 0 23.229 0H16.5C16.0853 0 15.75 0.3375 15.75 0.75C15.75 1.1625 16.0853 1.5 16.5 1.5H21.4717L13.3725 9.60004L14.433 10.6575L22.5233 2.56503L22.5 7.5C22.5 7.9125 22.8353 8.25 23.25 8.25C23.6647 8.25 24 7.9125 24 7.5V0.75C24 0.525 23.9085 0.345037 23.7637 0.225037ZM9.56701 13.3425L1.47675 21.435L1.5 16.5C1.5 16.0875 1.16475 15.75 0.75 15.75C0.33525 15.75 0 16.0875 0 16.5V23.25C0 23.475 0.0915018 23.655 0.236252 23.775C0.372752 23.91 0.561761 24 0.771011 24H7.5C7.91475 24 8.25 23.6625 8.25 23.25C8.25 22.8375 7.91475 22.5 7.5 22.5H2.52825L10.6275 14.4L9.56701 13.3425Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_339_325">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
 	</svg>
 </template>
diff --git a/src/components/Icon/icons/FileCode.vue b/src/components/Icon/icons/FileCode.vue
new file mode 100644
index 000000000..cd70bd513
--- /dev/null
+++ b/src/components/Icon/icons/FileCode.vue
@@ -0,0 +1,20 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M8.25333 10.3791L5.17247 13.4592C4.99482 13.6368 4.89384 13.879 4.89384 14.1311C4.89384 14.3839 4.99482 14.6246 5.17247 14.803L8.15084 17.7821C8.33684 17.9673 8.57979 18.0607 8.82425 18.0607C9.0672 18.0607 9.3109 17.9673 9.49615 17.7821C9.86816 17.4116 9.86816 16.8096 9.49615 16.4375L7.18968 14.1311L9.59864 11.7229C9.96989 11.3524 9.96989 10.7503 9.59864 10.3791C9.22587 10.0078 8.62458 10.0078 8.25333 10.3791Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M14.4014 11.7244L16.8111 14.1318L14.5039 16.4383C14.1334 16.8088 14.1334 17.4108 14.5039 17.7829C14.6891 17.9681 14.9321 18.0607 15.1765 18.0607C15.421 18.0607 15.6639 17.9681 15.8499 17.7829L18.8283 14.8037C19.006 14.6261 19.1069 14.3831 19.1069 14.1311C19.1069 13.8783 19.006 13.6368 18.8283 13.4584L15.7474 10.3791C15.3762 10.0078 14.7749 10.0078 14.4029 10.3791C14.0301 10.7503 14.0301 11.3531 14.4014 11.7244Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M10.0709 20.3801C10.1324 20.3976 10.1938 20.4082 10.2569 20.4082C10.5271 20.4082 10.7792 20.2321 10.8627 19.9588L14.3475 8.57449C14.4522 8.23968 14.2632 7.88513 13.9276 7.78264C13.5913 7.68015 13.2398 7.86843 13.1358 8.20324L9.6495 19.5868C9.54777 19.9223 9.73529 20.2761 10.0709 20.3801Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M8.51525 0L2.29964 6.56181V24H21.7004V0H8.51525ZM7.96786 2.75971V5.66747H5.21347L7.96786 2.75971ZM20.1987 22.5006H3.79983V7.16766H9.46729V1.49943H20.1987V22.5006Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/FilePowerpoint.vue b/src/components/Icon/icons/FilePowerpoint.vue
new file mode 100644
index 000000000..ed7aa9bd2
--- /dev/null
+++ b/src/components/Icon/icons/FilePowerpoint.vue
@@ -0,0 +1,24 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M13.902 1.74072V3.88797C16.452 3.90222 19.4198 3.86172 21.9675 3.89997C22.449 3.89997 22.47 4.32597 22.476 4.69797C22.5165 9.15447 22.4662 13.7392 22.5 18.198C22.491 18.3735 22.4955 19.023 22.4902 19.2075C22.4737 19.8247 22.1647 19.8517 21.5475 19.8705C21.4485 19.8705 21.1575 19.875 21.0615 19.8795C18.6758 19.8675 16.29 19.8727 13.902 19.8727V22.2592L1.5 20.3505C1.5 14.7835 1.5 9.21822 1.5 3.65472L13.902 1.74072Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M13.902 4.60352H21.777V19.1535H13.902V17.25H19.6275V16.2938H13.902V15.1013H19.6275V14.1473H13.9042C13.9042 13.6793 13.9042 13.212 13.8997 12.7448C14.3682 12.9138 14.8684 12.9762 15.364 12.9276C15.8596 12.8789 16.3381 12.7204 16.7647 12.4635C17.1996 12.1778 17.5598 11.7922 17.8154 11.339C18.071 10.8857 18.2145 10.378 18.234 9.85802C17.184 9.85052 16.1392 9.85352 15.0945 9.85352C15.0945 8.81552 15.1065 7.77827 15.0727 6.74252C14.6812 6.81752 14.2905 6.90002 13.9012 6.98327V4.60427"
+			fill="white"
+		/>
+		<path
+			d="M15.5745 6.24298C16.388 6.29396 17.1552 6.63919 17.7329 7.21426C18.3106 7.78933 18.6593 8.55494 18.714 9.36823C17.664 9.38023 16.6193 9.37573 15.5723 9.37573C15.5723 8.33098 15.5723 7.28548 15.5723 6.24298"
+			fill="currentColor"
+		/>
+		<path
+			d="M5.32501 8.04449C6.62026 8.10674 8.19002 7.53149 9.26402 8.50274C10.2923 9.75074 10.02 12.0457 8.49602 12.792C7.94189 13.0114 7.34117 13.0868 6.75001 13.011C6.75001 13.944 6.74551 14.877 6.75001 15.8092C6.27751 15.7687 5.80276 15.7282 5.33026 15.69C5.30851 13.14 5.30401 10.59 5.33026 8.03999"
+			fill="white"
+		/>
+		<path
+			d="M6.74476 9.3345C7.21501 9.31275 7.79476 9.22725 8.11426 9.66825C8.242 9.90839 8.31136 10.1753 8.3167 10.4472C8.32204 10.7192 8.26322 10.9885 8.14501 11.2335C7.87276 11.7248 7.25776 11.6775 6.78301 11.7345C6.73276 10.935 6.73801 10.1363 6.74476 9.3345Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/FileText.vue b/src/components/Icon/icons/FileText.vue
new file mode 100644
index 000000000..03e397c5d
--- /dev/null
+++ b/src/components/Icon/icons/FileText.vue
@@ -0,0 +1,92 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M19.9579 16.0421V0H7.80095L2.52634 5.27466V24H19.5789V23.2421H3.28421V5.81053H8.33682V0.757875H19.2V16.0421H19.9579V16.0421ZM7.57895 5.05261H3.82009L7.57895 1.29375V5.05261Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M17.5579 7.07367H4.92633V7.83154H17.5579V7.07367Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M14.2737 2.02106H13.5158V2.77893H14.2737V2.02106Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M17.3052 2.02106H16.5473V2.77893H17.3052V2.02106Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M15.7895 2.02106H15.0316V2.77893H15.7895V2.02106Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M14.2737 3.53687H13.5158V4.29474H14.2737V3.53687Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M15.7895 3.53687H15.0316V4.29474H15.7895V3.53687Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M12.7579 3.53687H12V4.29474H12.7579V3.53687Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M17.3052 3.53687H16.5473V4.29474H17.3052V3.53687Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M12.7579 5.05261H12V5.81049H12.7579V5.05261Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M15.7895 5.05261H15.0316V5.81049H15.7895V5.05261Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M11.2421 5.05261H10.4842V5.81049H11.2421V5.05261Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M17.3052 5.05261H16.5473V5.81049H17.3052V5.05261Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M14.2737 5.05261H13.5158V5.81049H14.2737V5.05261Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M17.5579 8.96838H4.92633V9.72626H17.5579V8.96838Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M17.5579 10.8632H4.92633V11.621H17.5579V10.8632Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M17.5579 12.7579H4.92633V13.5157H17.5579V12.7579Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M11.2421 14.6526H4.92633V15.4105H11.2421V14.6526Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M9.32817 16.5783L11.0549 19.6211L9.30276 22.4842H21.4737V16.5783H9.32817ZM20.7158 21.7263H10.6552L11.9346 19.6357L10.6297 17.3363H20.7157V21.7263H20.7158Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M13.0469 18.1585V18.646H13.7927V20.8087H14.4075V18.646H15.1532V18.1585H13.0469Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M16.9121 19.419L17.7434 18.1585H17.1541C17.1019 18.1585 17.0606 18.184 17.0304 18.2349L16.5684 19.028C16.5587 19.0438 16.5498 19.0589 16.542 19.0735C16.5341 19.088 16.5271 19.1032 16.5211 19.1189L15.9936 18.2258C15.9791 18.2016 15.9624 18.1843 15.9436 18.174C15.9248 18.1637 15.8954 18.1585 15.8554 18.1585H15.2406L16.0609 19.4463L15.2079 20.8087H15.7826C15.819 20.8087 15.8493 20.7987 15.8736 20.7787C15.8978 20.7587 15.9172 20.7359 15.9318 20.7105L16.4266 19.8519C16.4387 19.8325 16.4495 19.8095 16.4592 19.7828L16.9904 20.7104C17.0049 20.7371 17.0246 20.7602 17.0495 20.7796C17.0743 20.799 17.1068 20.8087 17.1468 20.8087H17.7617L16.9121 19.419Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M17.8162 18.1585V18.646H18.5619V20.8087H19.1768V18.646H19.9225V18.1585H17.8162Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Filter.vue b/src/components/Icon/icons/Filter.vue
new file mode 100644
index 000000000..45d1d6722
--- /dev/null
+++ b/src/components/Icon/icons/Filter.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Globe.vue b/src/components/Icon/icons/Globe.vue
new file mode 100644
index 000000000..92cab869c
--- /dev/null
+++ b/src/components/Icon/icons/Globe.vue
@@ -0,0 +1,15 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_338_70)">
+			<path
+				d="M12 0C5.916 0 0.892875 4.52887 0.1095 10.3984C0.10875 10.4044 0.108 10.41 0.10725 10.416C0.08625 10.5739 0.0675 10.7321 0.0525 10.8919C0.045375 10.9657 0.041625 11.0404 0.035625 11.1146C0.02775 11.2196 0.019125 11.3246 0.013875 11.4304C0.00525 11.6186 0 11.8088 0 12C0 18.6274 5.37262 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37262 18.6274 0 12 0ZM12.5107 21.9382C12.2407 22.2334 11.7979 22.4685 11.5076 22.1895C11.2627 21.948 11.4705 21.6495 11.5076 21.3071C11.5545 20.9077 11.3719 20.4277 11.7574 20.3036C12.0712 20.2065 12.3079 20.4244 12.5107 20.6831C12.8201 21.0656 12.8396 21.5723 12.5107 21.9382ZM16.2922 18.7013C15.8497 18.9292 15.54 18.8865 15.0461 18.9536C14.1259 19.0695 13.3984 19.5236 12.6713 18.9536C12.3461 18.693 12.3045 18.4095 12.0525 18.0758C11.646 17.5642 11.5444 16.6211 10.9237 16.83C10.527 16.9635 10.539 17.3606 10.3035 17.7056C9.99975 18.1391 10.0759 18.753 9.55163 18.828C9.18638 18.8797 8.9895 18.6562 8.68125 18.453C8.3355 18.2227 8.26725 17.9475 7.9305 17.7056C7.58025 17.4473 7.29675 17.4457 6.93525 17.2054C6.675 17.0317 6.6195 16.7164 6.30787 16.7051C6.02625 16.6969 5.8245 16.8349 5.68388 17.0786C5.421 17.5339 5.33063 18.876 4.56337 18.828C3.99487 18.7894 2.77912 17.5121 2.31563 17.2054C2.16375 17.103 2.02313 16.9988 1.88138 16.9193C1.1955 15.5107 0.79725 13.9373 0.7575 12.2749C0.98775 12.0818 1.22213 11.9865 1.43963 11.715C1.78725 11.2913 1.62 10.7749 2.067 10.4644C2.39925 10.2379 2.66775 10.2743 3.06787 10.2176C3.64125 10.1344 4.002 10.0594 4.56337 10.2176C5.1105 10.371 5.31938 10.6849 5.81063 10.9646C6.34125 11.2684 6.58013 11.6269 7.18313 11.715C7.62038 11.7769 7.92037 11.3771 8.30363 11.5886C8.61263 11.7604 8.83087 11.9884 8.8065 12.339C8.769 12.7957 7.86075 12.5055 7.80938 12.9623C7.74075 13.5465 8.75138 12.8895 9.30637 13.086C9.67163 13.2191 10.1468 13.1962 10.1783 13.5863C10.2086 14.0197 9.57525 13.9001 9.18188 14.0869C8.74613 14.2897 8.51775 14.4604 8.05538 14.5853C7.6335 14.697 7.18837 14.3497 6.93525 14.7086C6.7365 14.9869 6.80662 15.267 6.93525 15.5842C7.23037 16.3084 8.19112 16.0912 8.931 15.8306C9.44963 15.6476 9.54638 15.1834 10.0549 14.9573C10.5941 14.7169 11.0126 14.4566 11.5478 14.7086C11.9895 14.9171 11.8661 15.4774 12.3 15.7073C12.7699 15.9578 13.212 15.4339 13.6736 15.7073C14.0325 15.9206 14.0063 16.2776 14.2943 16.5799C14.6295 16.9331 14.823 17.2181 15.2948 17.3299C15.777 17.442 16.0717 16.9282 16.5424 17.0783C16.9042 17.1964 17.2005 17.3333 17.2875 17.7052C17.4244 18.2378 16.779 18.4492 16.2922 18.7013ZM17.1896 12.6904C16.7569 13.1254 16.3811 13.2675 15.7755 13.4003C15.2381 13.5184 14.4844 13.9395 14.361 13.4003C14.2669 12.9698 14.7469 12.816 15.0709 12.5156C15.4305 12.18 15.7661 12.147 16.1306 11.8061C16.4569 11.5054 16.4141 11.0445 16.8405 10.9215C17.2564 10.8015 17.6588 10.9144 17.8999 11.2766C18.2445 11.7892 17.6273 12.2554 17.1896 12.6904ZM22.4959 10.9946C22.3114 11.1851 22.3226 11.3861 22.134 11.5729C21.9251 11.775 21.6349 11.688 21.4823 11.9359C21.348 12.1523 21.4335 12.3322 21.4095 12.5865C21.3941 12.7316 20.688 13.0575 20.5421 12.7309C20.4619 12.5505 20.6475 12.3907 20.5421 12.2235C20.4435 12.0731 20.334 12.1504 20.205 12.2914C20.0704 12.4369 19.9155 12.6506 19.7471 12.7309C19.5263 12.8333 19.6736 11.8871 19.599 11.5729C19.5443 11.3243 19.6028 11.1679 19.6733 10.9219C19.767 10.5806 20.025 10.4696 20.1064 10.125C20.1791 9.82275 20.1187 9.63938 20.1064 9.32888C20.0918 8.98913 20.1007 8.79375 20.0359 8.46112C19.9639 8.10975 19.9414 7.88925 19.7467 7.59262C19.59 7.35862 19.4865 7.21725 19.239 7.08563C19.179 7.05263 19.1228 7.03088 19.0695 7.014C18.942 6.97163 18.8224 6.966 18.6578 6.94162C18.3248 6.89212 18.087 7.10362 17.79 6.94162C17.6167 6.846 17.5627 6.726 17.43 6.579C17.2785 6.41625 17.2384 6.28312 17.0674 6.14475C16.9395 6.04125 16.8604 5.98088 16.7055 5.92688C16.4093 5.82825 16.2022 5.89612 15.9083 6.00037C15.6195 6.10087 15.5115 6.2655 15.2561 6.4335C15.0604 6.54712 14.9212 6.57263 14.7506 6.72375C14.6471 6.8145 14.1544 7.16512 13.953 7.15687C13.749 7.149 13.6339 7.02825 13.4513 7.01362C13.4269 7.01062 13.4025 7.01062 13.3748 7.01362C13.3748 7.01362 13.3748 7.01362 13.3729 7.01362C13.1955 7.02712 13.1119 7.1145 12.9431 7.15687C12.528 7.26037 12.2636 7.11375 11.8538 7.23075C11.5868 7.30575 11.4814 7.518 11.205 7.51987C10.8896 7.52175 10.7831 7.24125 10.4805 7.15687C10.3147 7.11262 10.2172 7.1085 10.0466 7.08563C9.76575 7.04513 9.60487 7.041 9.32438 7.014H9.3225C9.3165 7.01625 9.10087 7.03575 9.0645 7.014C8.90625 6.90675 8.79375 6.81862 8.598 6.72412C8.38237 6.618 8.25338 6.56362 8.01788 6.50513L8.02763 6.36225C8.02763 6.36225 8.02763 6.04462 7.98225 5.90963C7.93912 5.77425 7.89225 5.77425 7.98225 5.50238C8.07525 5.23163 8.23688 5.05912 8.23688 5.05912C8.34825 4.97363 8.43038 4.94475 8.52525 4.84163C8.7165 4.6395 8.79412 4.46737 8.8155 4.1895C8.84062 3.825 8.36362 3.67687 8.45175 3.321C8.53012 3.01125 8.79075 2.9535 9.03187 2.74238C9.324 2.49113 9.58237 2.45812 9.82687 2.16412C10.0147 1.94175 10.1685 1.80225 10.1906 1.51237C10.2105 1.266 10.1044 1.11187 9.97688 0.935625C10.6335 0.815625 11.3089 0.75 12 0.75C17.5946 0.75 22.2337 4.83488 23.1019 10.1842C23.0257 10.3163 23.1015 10.4827 23.0006 10.6316C22.8671 10.8352 22.6635 10.8188 22.4959 10.9946Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_338_70">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Hdd.vue b/src/components/Icon/icons/Hdd.vue
new file mode 100644
index 000000000..33ebe8bcf
--- /dev/null
+++ b/src/components/Icon/icons/Hdd.vue
@@ -0,0 +1,16 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M23.3389 10.1113L19.9711 4.95638C19.4618 4.17713 18.5935 3.70697 17.6629 3.70697H6.33783C5.40647 3.70697 4.5382 4.17713 4.02886 4.95638L0.661078 10.1113C0.230062 10.7714 0 11.5426 0 12.3308V17.622C0 18.3569 0.300047 19.0297 0.782344 19.5106C1.26323 19.9929 1.93612 20.2933 2.67136 20.293H21.3286C22.804 20.2923 23.9993 19.0976 24 17.622V12.3308C24 11.5426 23.7699 10.7714 23.3389 10.1113ZM1.941 10.9474L5.30878 5.79244C5.53538 5.44491 5.9227 5.23566 6.33783 5.23566H17.6629C18.0773 5.23566 18.4647 5.44491 18.6912 5.79244L22.0597 10.9474C22.1477 11.0822 22.217 11.2267 22.2773 11.3743H1.7227C1.78298 11.2266 1.85227 11.0821 1.941 10.9474ZM22.4713 17.622C22.4707 17.94 22.3445 18.2207 22.1366 18.4296C21.9273 18.6378 21.6467 18.764 21.3286 18.7643H2.67136C2.35327 18.764 2.07262 18.6378 1.86333 18.4296C1.65544 18.2207 1.5293 17.94 1.52864 17.622V12.3308C1.52864 12.3177 1.53141 12.3045 1.53141 12.2914H22.4685C22.4685 12.3045 22.4713 12.3177 22.4713 12.3308V17.622H22.4713Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M14.293 16.5964C14.8418 16.5964 15.2867 16.1515 15.2867 15.6027C15.2867 15.0538 14.8418 14.6089 14.293 14.6089C13.7442 14.6089 13.2993 15.0538 13.2993 15.6027C13.2993 16.1515 13.7442 16.5964 14.293 16.5964Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M18.6496 16.5964C19.1985 16.5964 19.6434 16.1515 19.6434 15.6027C19.6434 15.0538 19.1985 14.6089 18.6496 14.6089C18.1008 14.6089 17.6559 15.0538 17.6559 15.6027C17.6559 16.1515 18.1008 16.5964 18.6496 16.5964Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Lock.vue b/src/components/Icon/icons/Lock.vue
new file mode 100644
index 000000000..9dc47358d
--- /dev/null
+++ b/src/components/Icon/icons/Lock.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M5.25 10.0546V8C5.25 4.27208 8.27208 1.25 12 1.25C15.7279 1.25 18.75 4.27208 18.75 8V10.0546C19.8648 10.1379 20.5907 10.348 21.1213 10.8787C22 11.7574 22 13.1716 22 16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H8C5.17157 22 3.75736 22 2.87868 21.1213C2 20.2426 2 18.8284 2 16C2 13.1716 2 11.7574 2.87868 10.8787C3.40931 10.348 4.13525 10.1379 5.25 10.0546ZM6.75 8C6.75 5.10051 9.10051 2.75 12 2.75C14.8995 2.75 17.25 5.10051 17.25 8V10.0036C16.867 10 16.4515 10 16 10H8C7.54849 10 7.13301 10 6.75 10.0036V8Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Minus.vue b/src/components/Icon/icons/Minus.vue
new file mode 100644
index 000000000..180f30a1f
--- /dev/null
+++ b/src/components/Icon/icons/Minus.vue
@@ -0,0 +1,9 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+			stroke="currentColor"
+		/>
+		<path d="M15 12H9" stroke="currentColor" stroke-linecap="round" />
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Money.vue b/src/components/Icon/icons/Money.vue
new file mode 100644
index 000000000..5fc5e0d00
--- /dev/null
+++ b/src/components/Icon/icons/Money.vue
@@ -0,0 +1,79 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_339_532)">
+			<path
+				d="M5.49762 3.69733H23.0787C23.3977 3.69733 23.6416 3.94125 23.6416 4.26022V15.1991C23.6416 15.5181 23.3977 15.762 23.0787 15.762H5.49762C5.17864 15.762 4.93472 15.5181 4.93472 15.1991V4.26022C4.93472 3.94125 5.17864 3.69733 5.49762 3.69733Z"
+				fill="white"
+			/>
+			<path
+				d="M23.0787 16.1373H5.49761C4.97224 16.1373 4.55945 15.7245 4.55945 15.1991V4.26018C4.55945 3.73481 4.97224 3.32202 5.49761 3.32202H23.0787C23.6041 3.32202 24.0169 3.73481 24.0169 4.26018V15.1991C24.0169 15.7057 23.6041 16.1373 23.0787 16.1373ZM5.49761 4.07255C5.38503 4.07255 5.30997 4.1476 5.30997 4.26018V15.1991C5.30997 15.3117 5.38503 15.3867 5.49761 15.3867H23.0787C23.1913 15.3867 23.2663 15.3117 23.2663 15.1991V4.26018C23.2663 4.1476 23.1913 4.07255 23.0787 4.07255H5.49761Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M3.90274 5.29218H21.5026C21.8216 5.29218 22.0655 5.5361 22.0655 5.85507V16.794C22.0655 17.113 21.8216 17.3569 21.5026 17.3569H3.90274C3.58377 17.3569 3.33984 17.113 3.33984 16.794V5.85507C3.33984 5.5361 3.58377 5.29218 3.90274 5.29218Z"
+				fill="white"
+			/>
+			<path
+				d="M21.4838 17.7322H3.90273C3.37736 17.7322 2.96457 17.3194 2.96457 16.794V5.85509C2.96457 5.32972 3.37736 4.91693 3.90273 4.91693H21.5026C22.028 4.91693 22.4407 5.32972 22.4407 5.85509V16.794C22.422 17.3006 22.0092 17.7322 21.4838 17.7322ZM3.90273 5.66746C3.79015 5.66746 3.7151 5.74251 3.7151 5.85509V16.794C3.7151 16.9066 3.79015 16.9817 3.90273 16.9817H21.5026C21.6152 16.9817 21.6902 16.9066 21.6902 16.794V5.85509C21.6902 5.74251 21.6152 5.66746 21.5026 5.66746H3.90273Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M2.43921 6.84949H20.0391C20.358 6.84949 20.602 7.09341 20.602 7.41238V18.3513C20.602 18.6703 20.358 18.9142 20.0391 18.9142H2.43921C2.12023 18.9142 1.87631 18.6703 1.87631 18.3513V7.41238C1.87631 7.11217 2.12023 6.84949 2.43921 6.84949Z"
+				fill="white"
+			/>
+			<path
+				d="M20.0391 19.2895H2.43923C1.91386 19.2895 1.50107 18.8767 1.50107 18.3513V7.4124C1.50107 6.88703 1.91386 6.47424 2.43923 6.47424H20.0391C20.5644 6.47424 20.9772 6.88703 20.9772 7.4124V18.3513C20.9772 18.8579 20.5457 19.2895 20.0391 19.2895ZM2.43923 7.22477C2.32665 7.22477 2.25159 7.29982 2.25159 7.4124V18.3513C2.25159 18.4639 2.32665 18.539 2.43923 18.539H20.0391C20.1517 18.539 20.2267 18.4639 20.2267 18.3513V7.4124C20.2267 7.29982 20.1517 7.22477 20.0391 7.22477H2.43923Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M0.93817 8.23798H18.538C18.857 8.23798 19.1009 8.4819 19.1009 8.80087V19.7398C19.1009 20.0588 18.857 20.3027 18.538 20.3027H0.93817C0.619196 20.3027 0.375275 20.0588 0.375275 19.7398V8.80087C0.375275 8.50066 0.619196 8.23798 0.93817 8.23798Z"
+				fill="white"
+			/>
+			<path
+				d="M18.538 20.678H0.938159C0.41279 20.678 0 20.2652 0 19.7398V8.80089C0 8.27552 0.41279 7.86273 0.938159 7.86273H18.538C19.0634 7.86273 19.4762 8.27552 19.4762 8.80089V19.7398C19.4762 20.2652 19.0446 20.678 18.538 20.678ZM0.938159 8.61326C0.82558 8.61326 0.750527 8.68831 0.750527 8.80089V19.7398C0.750527 19.8524 0.82558 19.9275 0.938159 19.9275H18.538C18.6506 19.9275 18.7256 19.8524 18.7256 19.7398V8.80089C18.7256 8.68831 18.6506 8.61326 18.538 8.61326H0.938159Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M16.1739 18.614H3.30232C3.30232 17.7322 2.57056 17.0004 1.68869 17.0004V11.3339C2.57056 11.3339 3.30232 10.6021 3.30232 9.72028H16.1739C16.1739 10.6021 16.9056 11.3339 17.7875 11.3339V17.0004C16.8869 17.0004 16.1739 17.7322 16.1739 18.614Z"
+				fill="white"
+			/>
+			<path
+				d="M16.1738 18.9893H3.30231C3.09592 18.9893 2.92705 18.8204 2.92705 18.614C2.92705 17.9386 2.36415 17.3757 1.68868 17.3757C1.48228 17.3757 1.31342 17.2068 1.31342 17.0004V11.3339C1.31342 11.1275 1.48228 10.9587 1.68868 10.9587C2.36415 10.9587 2.92705 10.3958 2.92705 9.7203C2.92705 9.5139 3.09592 9.34503 3.30231 9.34503H16.1738C16.3802 9.34503 16.5491 9.5139 16.5491 9.7203C16.5491 10.3958 17.112 10.9587 17.7875 10.9587C17.9939 10.9587 18.1627 11.1275 18.1627 11.3339V17.0004C18.1627 17.2068 17.9939 17.3757 17.7875 17.3757C17.112 17.3757 16.5491 17.9386 16.5491 18.614C16.5491 18.8204 16.3802 18.9893 16.1738 18.9893ZM3.64005 18.2388H15.8173C15.9675 17.4507 16.6054 16.8128 17.3935 16.6627V11.6717C16.6054 11.5216 15.9675 10.8836 15.8173 10.0956H3.64005C3.48994 10.8836 2.852 11.5216 2.06394 11.6717V16.6439C2.852 16.8128 3.48994 17.4507 3.64005 18.2388Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M9.7756 16.7189C9.17518 16.7189 8.53724 16.4938 8.08692 15.9121C7.95558 15.7432 7.9931 15.5181 8.14321 15.3867C8.31208 15.2554 8.53723 15.2929 8.66858 15.443C9.11889 16.0247 9.81313 16.0435 10.2634 15.8934C10.6387 15.762 10.8639 15.5181 10.8639 15.2554C10.8639 15.0115 10.2822 14.8426 9.7756 14.6925C8.98755 14.4486 7.9931 14.1671 7.9931 13.229C7.9931 12.7787 8.27455 12.3659 8.76239 12.122C9.36281 11.8217 10.376 11.7092 11.3329 12.4034C11.5018 12.5347 11.5393 12.7599 11.408 12.9288C11.2767 13.0976 11.0515 13.1352 10.8826 13.0038C10.2447 12.5347 9.53168 12.5535 9.10013 12.7787C8.87497 12.8912 8.72487 13.0601 8.72487 13.229C8.72487 13.5855 9.25024 13.7544 9.96324 13.9795C10.7325 14.2047 11.5769 14.4674 11.5769 15.2554C11.5769 15.8371 11.1453 16.3624 10.4698 16.6064C10.2822 16.6626 10.0195 16.7189 9.7756 16.7189Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M9.73809 12.6286C9.53169 12.6286 9.36282 12.4597 9.36282 12.2533V11.4278C9.36282 11.2214 9.53169 11.0525 9.73809 11.0525C9.94448 11.0525 10.1134 11.2214 10.1134 11.4278V12.2533C10.1134 12.4785 9.94448 12.6286 9.73809 12.6286Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M9.73809 17.432C9.53169 17.432 9.36282 17.2631 9.36282 17.0567V16.4375C9.36282 16.2311 9.53169 16.0623 9.73809 16.0623C9.94448 16.0623 10.1134 16.2311 10.1134 16.4375V17.0567C10.1134 17.2631 9.94448 17.432 9.73809 17.432Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M4.14667 14.3923C4.14667 14.4835 4.16462 14.5737 4.19951 14.658C4.2344 14.7422 4.28554 14.8187 4.35 14.8832C4.41447 14.9477 4.491 14.9988 4.57523 15.0337C4.65946 15.0686 4.74974 15.0865 4.8409 15.0865C4.93207 15.0865 5.02235 15.0686 5.10658 15.0337C5.19081 14.9988 5.26734 14.9477 5.3318 14.8832C5.39627 14.8187 5.44741 14.7422 5.4823 14.658C5.51719 14.5737 5.53514 14.4835 5.53514 14.3923C5.53514 14.2082 5.462 14.0316 5.3318 13.9014C5.20161 13.7712 5.02503 13.6981 4.8409 13.6981C4.65678 13.6981 4.4802 13.7712 4.35 13.9014C4.21981 14.0316 4.14667 14.2082 4.14667 14.3923Z"
+				fill="white"
+			/>
+			<path
+				d="M4.84089 15.443C4.25924 15.443 3.77139 14.9739 3.77139 14.3735C3.77139 13.7731 4.24047 13.304 4.84089 13.304C5.42255 13.304 5.91039 13.7731 5.91039 14.3735C5.91039 14.9739 5.42255 15.443 4.84089 15.443ZM4.84089 14.0733C4.67202 14.0733 4.52192 14.2046 4.52192 14.3923C4.52192 14.5799 4.65326 14.7113 4.84089 14.7113C5.00976 14.7113 5.15987 14.5799 5.15987 14.3923C5.15987 14.2046 5.00976 14.0733 4.84089 14.0733Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M13.9786 14.3923C13.9786 14.5764 14.0517 14.753 14.1819 14.8832C14.3121 15.0134 14.4887 15.0865 14.6728 15.0865C14.8569 15.0865 15.0335 15.0134 15.1637 14.8832C15.2939 14.753 15.3671 14.5764 15.3671 14.3923C15.3671 14.2082 15.2939 14.0316 15.1637 13.9014C15.0335 13.7712 14.8569 13.6981 14.6728 13.6981C14.4887 13.6981 14.3121 13.7712 14.1819 13.9014C14.0517 14.0316 13.9786 14.2082 13.9786 14.3923Z"
+				fill="white"
+			/>
+			<path
+				d="M14.6728 15.443C14.0911 15.443 13.6033 14.9739 13.6033 14.3735C13.6033 13.7731 14.0724 13.304 14.6728 13.304C15.2545 13.304 15.7423 13.7731 15.7423 14.3735C15.7423 14.9739 15.2545 15.443 14.6728 15.443ZM14.6728 14.0733C14.5039 14.0733 14.3538 14.2046 14.3538 14.3923C14.3538 14.5799 14.4852 14.7113 14.6728 14.7113C14.8604 14.7113 14.9918 14.5799 14.9918 14.3923C14.9918 14.2046 14.8417 14.0733 14.6728 14.0733Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_339_532">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/NotVisible.vue b/src/components/Icon/icons/NotVisible.vue
new file mode 100644
index 000000000..bec9e8a9f
--- /dev/null
+++ b/src/components/Icon/icons/NotVisible.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_339_278)">
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M5.12738 3.87939L3.966 5.04039L18.9109 19.9856L20.0723 18.8243L5.12738 3.87939Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M6.41963 7.49403L7.51275 8.58715C6.31613 9.60603 5.36325 10.8743 4.7475 11.9839L4.74563 11.9877C6.4605 14.8549 9.1815 17.5647 12.6158 17.1537C13.5428 17.0427 14.4075 16.7258 15.1976 16.2724L16.3043 17.3787C14.7641 18.3672 12.9986 18.8907 11.0858 18.6319C7.6365 18.1654 4.81613 15.3364 3.03825 12.0139C3.873 10.3343 5.01488 8.7274 6.41963 7.49403ZM8.90588 5.87403C9.87038 5.44428 10.914 5.19153 12.0285 5.17353C12.0904 5.17315 12.825 5.20803 13.158 5.26278C13.3669 5.29728 13.575 5.3404 13.7801 5.39403C17.052 6.2464 19.476 9.16428 21 12.0139C20.3606 13.305 19.5233 14.4132 18.5246 15.4928L17.4645 14.4327C18.2021 13.6377 18.8228 12.8723 19.2964 12.0139C19.2964 12.0139 18.8145 11.1285 18.4534 10.6478C18.2213 10.3388 17.9771 10.0388 17.7206 9.74965C17.5181 9.52165 16.7318 8.74728 16.5446 8.58603C15.2891 7.5064 13.815 6.65928 12.0469 6.67353C11.3621 6.6844 10.7036 6.8194 10.0785 7.04665L8.90588 5.87403Z"
+				fill="currentColor"
+			/>
+			<path
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M9.39526 10.47L10.2949 11.3693C10.236 11.5481 10.2038 11.7394 10.2038 11.9378C10.2038 12.9398 11.0171 13.7531 12.0191 13.7531C12.2175 13.7531 12.4088 13.7213 12.5876 13.662L13.4873 14.5616C13.053 14.8054 12.552 14.9441 12.0191 14.9441C10.3598 14.9441 9.01276 13.5971 9.01276 11.9378C9.01276 11.4049 9.15188 10.9043 9.39526 10.47ZM11.9636 8.93215C11.982 8.93177 12.0008 8.9314 12.0191 8.9314C13.6785 8.9314 15.0255 10.2788 15.0255 11.9378C15.0255 11.9565 15.0255 11.9749 15.0251 11.9933L11.9636 8.93215Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_339_278">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Orcid.vue b/src/components/Icon/icons/Orcid.vue
index f6fb8ff40..01fe1647c 100644
--- a/src/components/Icon/icons/Orcid.vue
+++ b/src/components/Icon/icons/Orcid.vue
@@ -1,26 +1,19 @@
 <template>
-	<svg
-		viewBox="0 0 24 24"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		xmlns:xlink="http://www.w3.org/1999/xlink"
-	>
-		<rect width="24" height="24" fill="url(#pattern0)" />
-		<defs>
-			<pattern
-				id="pattern0"
-				patternContentUnits="objectBoundingBox"
-				width="1"
-				height="1"
-			>
-				<use xlink:href="#image0_3384_6002" transform="scale(0.005)" />
-			</pattern>
-			<image
-				id="image0_3384_6002"
-				width="200"
-				height="200"
-				xlink:href="data:image/png;base64,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"
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_11_315)">
+			<path
+				d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+				fill="#A6CE39"
+			/>
+			<path
+				d="M8.10938 17.4375H6.65625V7.40625H8.10938V17.4375ZM10.2188 7.40625H14.1094C17.8125 7.40625 19.4531 10.0781 19.4531 12.4219C19.4531 15 17.4375 17.4375 14.1094 17.4375H10.1719L10.2188 7.40625ZM11.6719 16.1719H13.9688C17.25 16.1719 18 13.6875 18 12.4688C18 10.4531 16.7344 8.76562 13.9219 8.76562H11.7188L11.6719 16.1719ZM8.34375 5.34375C8.34375 5.85938 7.92188 6.28125 7.40625 6.28125C6.89062 6.28125 6.46875 5.85938 6.46875 5.34375C6.46875 5.09511 6.56752 4.85665 6.74334 4.68084C6.91915 4.50502 7.15761 4.40625 7.40625 4.40625C7.92188 4.40625 8.34375 4.82812 8.34375 5.34375Z"
+				fill="white"
 			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_11_315">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
 		</defs>
 	</svg>
 </template>
diff --git a/src/components/Icon/icons/Paste.vue b/src/components/Icon/icons/Paste.vue
new file mode 100644
index 000000000..493439c37
--- /dev/null
+++ b/src/components/Icon/icons/Paste.vue
@@ -0,0 +1,15 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_359_48)">
+			<path
+				d="M3 21H8V20H4V4H6V6H16V4H18V7H18.4C18.619 7.0052 18.83 7.08293 19 7.221V3H16V2H13C13 1.46957 12.7893 0.960859 12.4142 0.585786C12.0391 0.210714 11.5304 0 11 0C10.4696 0 9.96086 0.210714 9.58579 0.585786C9.21071 0.960859 9 1.46957 9 2H6V3H3V21ZM7 3H10V1.615C10 1.45206 10.0647 1.29579 10.1798 1.18048C10.2949 1.06518 10.4511 1.00026 10.614 1H11.385C11.5481 1 11.7045 1.06479 11.8199 1.18013C11.9352 1.29546 12 1.45189 12 1.615V3H15V5H7V3ZM11 17H20V18H11V17ZM9 8V24H22V11.6L18.4 8H9ZM21 23H10V9H17V13H21V23ZM21 12H18V9H18.31L21 11.69V12ZM11 14H20V15H11V14ZM11 20H18V21H11V20Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_359_48">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Photo.vue b/src/components/Icon/icons/Photo.vue
new file mode 100644
index 000000000..82f28d9de
--- /dev/null
+++ b/src/components/Icon/icons/Photo.vue
@@ -0,0 +1,22 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M8 11C9.10457 11 10 10.1046 10 9C10 7.89543 9.10457 7 8 7C6.89543 7 6 7.89543 6 9C6 10.1046 6.89543 11 8 11Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M6.56055 21C12.1305 8.89997 16.7605 6.77997 22.0005 14.63"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M18 3H6C3.79086 3 2 4.79086 2 7V17C2 19.2091 3.79086 21 6 21H18C20.2091 21 22 19.2091 22 17V7C22 4.79086 20.2091 3 18 3Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Pin.vue b/src/components/Icon/icons/Pin.vue
new file mode 100644
index 000000000..89f1423d8
--- /dev/null
+++ b/src/components/Icon/icons/Pin.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M19.1835 7.80516L16.2188 4.83755C14.1921 2.8089 13.1788 1.79457 12.0904 2.03468C11.0021 2.2748 10.5086 3.62155 9.5217 6.31506L8.85373 8.1381C8.59063 8.85617 8.45908 9.2152 8.22239 9.49292C8.11619 9.61754 7.99536 9.72887 7.86251 9.82451C7.56644 10.0377 7.19811 10.1392 6.46145 10.3423C4.80107 10.8 3.97088 11.0289 3.65804 11.5721C3.5228 11.8069 3.45242 12.0735 3.45413 12.3446C3.45809 12.9715 4.06698 13.581 5.28476 14.8L6.69935 16.2163L2.22345 20.6964C1.92552 20.9946 1.92552 21.4782 2.22345 21.7764C2.52138 22.0746 3.00443 22.0746 3.30236 21.7764L7.77841 17.2961L9.24441 18.7635C10.4699 19.9902 11.0827 20.6036 11.7134 20.6045C11.9792 20.6049 12.2404 20.5358 12.4713 20.4041C13.0192 20.0914 13.2493 19.2551 13.7095 17.5825C13.9119 16.8472 14.013 16.4795 14.2254 16.1835C14.3184 16.054 14.4262 15.9358 14.5468 15.8314C14.8221 15.593 15.1788 15.459 15.8922 15.191L17.7362 14.4981C20.4 13.4973 21.7319 12.9969 21.9667 11.9115C22.2014 10.826 21.1954 9.81905 19.1835 7.80516Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Print.vue b/src/components/Icon/icons/Print.vue
new file mode 100644
index 000000000..8764f6b5c
--- /dev/null
+++ b/src/components/Icon/icons/Print.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M8.242 5.0785L7.984 7.0945H16.8197L16.5617 5.0785C16.5617 4.46875 16.0697 4 15.46 4H9.319C8.70925 4 8.2405 4.46875 8.2405 5.0785H8.242ZM5.0785 8.1955H19.7267C20.3365 8.1955 20.8052 8.66425 20.8052 9.274V15.6962C20.8052 16.306 20.3365 16.7747 19.7267 16.7747H17.7347V19.7515H7.0705V16.7747H5.0785C4.46875 16.7747 4 16.306 4 15.6962V9.274C4 8.66425 4.46875 8.1955 5.0785 8.1955ZM16.6562 18.6722V11.7115H8.14825V18.6722H16.6562ZM15.391 13.7267H9.29725C9.15625 13.7267 9.03925 13.5857 9.03925 13.4455V13.117C9.03925 12.976 9.15625 12.859 9.29725 12.859H15.391C15.532 12.859 15.6722 12.976 15.6722 13.117V13.4455C15.6722 13.5865 15.5312 13.7267 15.391 13.7267ZM15.391 15.6722H9.29725C9.15625 15.6722 9.03925 15.5312 9.03925 15.391V15.0625C9.03925 14.9215 9.15625 14.8045 9.29725 14.8045H15.391C15.532 14.8045 15.6722 14.9215 15.6722 15.0625V15.391C15.6722 15.532 15.5312 15.6722 15.391 15.6722ZM15.391 17.617H9.29725C9.15625 17.617 9.03925 17.476 9.03925 17.3357V17.0072C9.03925 16.8662 9.15625 16.7492 9.29725 16.7492H15.391C15.532 16.7492 15.6722 16.8662 15.6722 17.0072V17.3357C15.6722 17.4767 15.5312 17.617 15.391 17.617Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Question.vue b/src/components/Icon/icons/Question.vue
new file mode 100644
index 000000000..e977c070b
--- /dev/null
+++ b/src/components/Icon/icons/Question.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M9.11241 7.82201C9.44756 6.83666 10.5551 6 12 6C13.7865 6 15 7.24054 15 8.5C15 9.75946 13.7865 11 12 11C11.4477 11 11 11.4477 11 12V14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V12.9082C15.203 12.5001 17 10.7706 17 8.5C17 5.89347 14.6319 4 12 4C9.82097 4 7.86728 5.27185 7.21894 7.17799C7.0411 7.70085 7.3208 8.26889 7.84366 8.44673C8.36653 8.62458 8.93457 8.34488 9.11241 7.82201ZM12 20C12.8285 20 13.5 19.3284 13.5 18.5C13.5 17.6716 12.8285 17 12 17C11.1716 17 10.5 17.6716 10.5 18.5C10.5 19.3284 11.1716 20 12 20Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ReinstateReviewer.vue b/src/components/Icon/icons/ReinstateReviewer.vue
new file mode 100644
index 000000000..8dc68ca9b
--- /dev/null
+++ b/src/components/Icon/icons/ReinstateReviewer.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_446_210)">
+			<path
+				d="M12 11.3334C12.9839 11.3347 13.9461 11.0441 14.7649 10.4985C15.5836 9.95279 16.2221 9.17653 16.5995 8.26789C16.977 7.35924 17.0764 6.35906 16.8853 5.39389C16.6941 4.42872 16.221 3.54194 15.5257 2.84574C14.8304 2.14954 13.9443 1.67521 12.9794 1.48277C12.0145 1.29033 11.0142 1.38843 10.105 1.76465C9.19586 2.14088 8.41874 2.77832 7.87196 3.59632C7.32519 4.41433 7.03334 5.37613 7.03334 6.36005C7.03334 7.67791 7.5564 8.94188 8.48764 9.87437C9.41888 10.8069 10.6822 11.3316 12 11.3334ZM12 2.71338C12.7205 2.71206 13.4252 2.92459 14.0248 3.32406C14.6244 3.72352 15.092 4.29194 15.3683 4.95733C15.6446 5.62273 15.7173 6.35516 15.5771 7.06187C15.4368 7.76858 15.09 8.41778 14.5805 8.92725C14.0711 9.43671 13.4219 9.78352 12.7152 9.92376C12.0085 10.064 11.276 9.99135 10.6106 9.71502C9.94523 9.43869 9.37681 8.97111 8.97735 8.3715C8.57788 7.77188 8.36536 7.06721 8.36667 6.34672C8.36844 5.38364 8.7518 4.46051 9.4328 3.77951C10.1138 3.09851 11.0369 2.71515 12 2.71338Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M4 21.26V17.18C5.02925 16.0998 6.27203 15.2456 7.64932 14.6717C9.0266 14.0978 10.5082 13.8169 12 13.8467C14.0417 13.8192 16.0513 14.3567 17.8067 15.4L18.7067 14.3933C16.6998 13.1293 14.3716 12.4697 12 12.4933C10.2648 12.4491 8.54122 12.7883 6.95213 13.4866C5.36304 14.1849 3.94758 15.2252 2.80666 16.5333C2.71773 16.6479 2.66858 16.7883 2.66666 16.9333V21.26C2.6577 21.6231 2.79296 21.975 3.04285 22.2387C3.29274 22.5023 3.6369 22.6562 4 22.6667H12.26L10.9933 21.3333L4 21.26Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M20 21.26V21.3333H17.9L16.7 22.6667H20C20.3584 22.6562 20.6985 22.506 20.9477 22.2482C21.1968 21.9903 21.3352 21.6452 21.3333 21.2867V17.4667L20 18.9533V21.26Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M23.1733 12.4133C23.0415 12.296 22.8685 12.2357 22.6923 12.2457C22.5161 12.2557 22.351 12.3352 22.2333 12.4667L14.4867 21.1333L11.02 17.4067C10.9631 17.3401 10.8936 17.2854 10.8156 17.2458C10.7376 17.2061 10.6525 17.1821 10.5652 17.1753C10.4779 17.1685 10.3901 17.1789 10.3069 17.2061C10.2236 17.2332 10.1465 17.2764 10.08 17.3333C10.0148 17.3926 9.96205 17.4643 9.92472 17.5441C9.8874 17.6239 9.86627 17.7103 9.86255 17.7983C9.85883 17.8864 9.8726 17.9743 9.90305 18.0569C9.93351 18.1396 9.98006 18.2154 10.04 18.28L14.5 23.08L23.2267 13.3333C23.3379 13.2026 23.3945 13.034 23.3846 12.8626C23.3746 12.6913 23.299 12.5303 23.1733 12.4133Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_446_210">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Sitemap.vue b/src/components/Icon/icons/Sitemap.vue
new file mode 100644
index 000000000..91420cf0c
--- /dev/null
+++ b/src/components/Icon/icons/Sitemap.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M18.2812 11.7893V15.1178H20.0625V19.3598H15.8205V15.1178H17.5785V12.4928H12.4455V15.1178H14.2267V19.3598H9.96075V15.1178H11.742V12.4928H6.609V15.1178H8.367V19.3598H4.125V15.1178H5.90625V11.7893H11.742V9.21075H9.44475V4.96875H14.742V9.21075H12.4447V11.7893H18.2812Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Star.vue b/src/components/Icon/icons/Star.vue
new file mode 100644
index 000000000..70434e15e
--- /dev/null
+++ b/src/components/Icon/icons/Star.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M11.2691 4.41115C11.5006 3.89177 11.6164 3.63208 11.7776 3.55211C11.9176 3.48263 12.082 3.48263 12.222 3.55211C12.3832 3.63208 12.499 3.89177 12.7305 4.41115L14.5745 8.54808C14.643 8.70162 14.6772 8.77839 14.7302 8.83718C14.777 8.8892 14.8343 8.93081 14.8982 8.95929C14.9705 8.99149 15.0541 9.00031 15.2213 9.01795L19.7256 9.49336C20.2911 9.55304 20.5738 9.58288 20.6997 9.71147C20.809 9.82316 20.8598 9.97956 20.837 10.1342C20.8108 10.3122 20.5996 10.5025 20.1772 10.8832L16.8125 13.9154C16.6877 14.0279 16.6252 14.0842 16.5857 14.1527C16.5507 14.2134 16.5288 14.2807 16.5215 14.3503C16.5132 14.429 16.5306 14.5112 16.5655 14.6757L17.5053 19.1064C17.6233 19.6627 17.6823 19.9408 17.5989 20.1002C17.5264 20.2388 17.3934 20.3354 17.2393 20.3615C17.0619 20.3915 16.8156 20.2495 16.323 19.9654L12.3995 17.7024C12.2539 17.6184 12.1811 17.5765 12.1037 17.56C12.0352 17.5455 11.9644 17.5455 11.8959 17.56C11.8185 17.5765 11.7457 17.6184 11.6001 17.7024L7.67662 19.9654C7.18404 20.2495 6.93775 20.3915 6.76034 20.3615C6.60623 20.3354 6.47319 20.2388 6.40075 20.1002C6.31736 19.9408 6.37635 19.6627 6.49434 19.1064L7.4341 14.6757C7.46898 14.5112 7.48642 14.429 7.47814 14.3503C7.47081 14.2807 7.44894 14.2134 7.41394 14.1527C7.37439 14.0842 7.31195 14.0279 7.18708 13.9154L3.82246 10.8832C3.40005 10.5025 3.18884 10.3122 3.16258 10.1342C3.13978 9.97956 3.19059 9.82316 3.29993 9.71147C3.42581 9.58288 3.70856 9.55304 4.27406 9.49336L8.77835 9.01795C8.94553 9.00031 9.02911 8.99149 9.10139 8.95929C9.16534 8.93081 9.2226 8.8892 9.26946 8.83718C9.32241 8.77839 9.35663 8.70162 9.42508 8.54808L11.2691 4.41115Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/StarTicked.vue b/src/components/Icon/icons/StarTicked.vue
new file mode 100644
index 000000000..263e0c057
--- /dev/null
+++ b/src/components/Icon/icons/StarTicked.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M19.9203 9.73016L15.0488 9.26951C14.7417 9.24159 14.4763 9.04617 14.3508 8.75303L12.606 4.52346C12.3268 3.82551 11.3356 3.82551 11.0564 4.52346L9.32548 8.75303C9.21381 9.04617 8.93463 9.24159 8.62753 9.26951L3.75585 9.73016C3.02998 9.79995 2.73685 10.7073 3.28124 11.1958L6.95245 14.4204C7.18976 14.6298 7.28747 14.9368 7.21767 15.2439L6.11492 19.7665C5.94741 20.4786 6.71515 21.0647 7.35726 20.6879L11.4193 18.3008C11.6845 18.1473 12.0056 18.1473 12.2708 18.3008L16.333 20.6879C16.9751 21.0647 17.7429 20.4925 17.5752 19.7665L16.4864 15.2439C16.4166 14.9368 16.5143 14.6298 16.7516 14.4204L20.4229 11.1958C20.9533 10.7073 20.6462 9.79995 19.9203 9.73016Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Unlock.vue b/src/components/Icon/icons/Unlock.vue
new file mode 100644
index 000000000..fd2659d25
--- /dev/null
+++ b/src/components/Icon/icons/Unlock.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M20 22V12H8V7.95C8 5.77793 9.78136 4 12 4C14.2186 4 16 5.77793 16 7.95H18C18 4.65445 15.3042 2 12 2C8.69579 2 6 4.65445 6 7.95V12H4V22H20Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Upload.vue b/src/components/Icon/icons/Upload.vue
new file mode 100644
index 000000000..df850b06c
--- /dev/null
+++ b/src/components/Icon/icons/Upload.vue
@@ -0,0 +1,14 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M4.25 5C4.25 4.27065 4.53973 3.57118 5.05546 3.05546C5.57118 2.53973 6.27065 2.25 7 2.25H14.987C15.2648 2.25016 15.5386 2.31645 15.7857 2.44339C16.0328 2.57033 16.2461 2.75427 16.408 2.98L19.422 7.177C19.635 7.475 19.75 7.832 19.75 8.197V19C19.75 19.7293 19.4603 20.4288 18.9445 20.9445C18.4288 21.4603 17.7293 21.75 17 21.75H7C6.27065 21.75 5.57118 21.4603 5.05546 20.9445C4.53973 20.4288 4.25 19.7293 4.25 19V5ZM7 3.75C6.31 3.75 5.75 4.31 5.75 5V19C5.75 19.69 6.31 20.25 7 20.25H17C17.69 20.25 18.25 19.69 18.25 19V8.897H15C14.8011 8.897 14.6103 8.81798 14.4697 8.67733C14.329 8.53668 14.25 8.34591 14.25 8.147V3.75H7Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M15.086 13.219C15.0245 13.296 14.9483 13.3601 14.862 13.4077C14.7756 13.4553 14.6807 13.4854 14.5828 13.4962C14.4848 13.5071 14.3856 13.4985 14.2909 13.471C14.1962 13.4436 14.1079 13.3977 14.031 13.336L12.751 12.31V15.75C12.751 15.9489 12.672 16.1397 12.5313 16.2803C12.3907 16.421 12.1999 16.5 12.001 16.5C11.8021 16.5 11.6113 16.421 11.4707 16.2803C11.33 16.1397 11.251 15.9489 11.251 15.75V12.31L9.969 13.336C9.81358 13.4603 9.61517 13.5177 9.41741 13.4956C9.21966 13.4736 9.03875 13.3739 8.9145 13.2185C8.79024 13.0631 8.73282 12.8647 8.75485 12.6669C8.77689 12.4692 8.87658 12.2883 9.032 12.164L11.529 10.166C11.6607 10.0596 11.8247 10.001 11.994 10H12.002C12.182 10 12.346 10.064 12.475 10.17L14.969 12.164C15.046 12.2255 15.1101 12.3017 15.1577 12.388C15.2053 12.4744 15.2354 12.5693 15.2462 12.6672C15.2571 12.7652 15.2485 12.8644 15.221 12.9591C15.1935 13.0537 15.1477 13.1421 15.086 13.219Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/UsefulTipsPrimary.vue b/src/components/Icon/icons/UsefulTipsPrimary.vue
new file mode 100644
index 000000000..22672c4b5
--- /dev/null
+++ b/src/components/Icon/icons/UsefulTipsPrimary.vue
@@ -0,0 +1,12 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M15 17C15 14 19 12 19 8C19 4 16 1 12 1C8 1 5 4 5 8C5 12 9 14 9 17V20C9 22 10 23 12 23C14 23 15 22 15 20V17ZM9 18H15H9Z"
+		/>
+		<path
+			d="M9 18H15M15 17C15 14 19 12 19 8C19 4 16 1 12 1C8 1 5 4 5 8C5 12 9 14 9 17V20C9 22 10 23 12 23C14 23 15 22 15 20V17Z"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/User.vue b/src/components/Icon/icons/User.vue
new file mode 100644
index 000000000..41180c75d
--- /dev/null
+++ b/src/components/Icon/icons/User.vue
@@ -0,0 +1,10 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M5 21C5 17.134 8.13401 14 12 14C15.866 14 19 17.134 19 21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
+			stroke="currentColor"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/InitialsAvatar/InitialsAvatar.mdx b/src/components/InitialsAvatar/InitialsAvatar.mdx
new file mode 100644
index 000000000..2be73ecb1
--- /dev/null
+++ b/src/components/InitialsAvatar/InitialsAvatar.mdx
@@ -0,0 +1,15 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as InitialsAvatarStories from './InitialsAvatar.stories.js';
+
+<Meta of={InitialsAvatarStories} />
+
+# InitialsAvatar
+
+## Usage
+
+Use this component to display an avatar that shows the name initials of the user. It can be used in user lists or as a user information icon in the top navbar.
+
+<Primary />
+<Controls />
+<Stories />
diff --git a/src/components/InitialsAvatar/InitialsAvatar.stories.js b/src/components/InitialsAvatar/InitialsAvatar.stories.js
new file mode 100644
index 000000000..a7b347a30
--- /dev/null
+++ b/src/components/InitialsAvatar/InitialsAvatar.stories.js
@@ -0,0 +1,48 @@
+import InitialsAvatar from './InitialsAvatar.vue';
+
+export default {
+	title: 'Components/InitialsAvatar',
+	component: InitialsAvatar,
+	render: (args) => ({
+		components: {InitialsAvatar},
+		setup() {
+			return {args};
+		},
+		template: `
+			<InitialsAvatar v-bind="args" />
+		`,
+	}),
+};
+
+export const Default = {
+	args: {givenName: 'Ramiro', familyName: 'Vaca'},
+};
+
+export const GivenNameOnly = {
+	args: {givenName: 'Daniel'},
+};
+
+export const IsSecondary = {
+	args: {givenName: 'David', familyName: 'Buskins', isSecondary: true},
+};
+
+export const IsWarnable = {
+	args: {givenName: 'Aisla', familyName: 'McCrae', isWarnable: true},
+};
+
+export const IsDisabled = {
+	args: {
+		givenName: 'Adela',
+		familyName: 'Gallego',
+		isSecondary: true,
+		isDisabled: true,
+	},
+};
+
+export const UndefinedName = {
+	args: {},
+};
+
+export const SmallIcon = {
+	args: {givenName: 'Paul', familyName: 'Hudson', shrink: true},
+};
diff --git a/src/components/InitialsAvatar/InitialsAvatar.vue b/src/components/InitialsAvatar/InitialsAvatar.vue
new file mode 100644
index 000000000..39e501dfe
--- /dev/null
+++ b/src/components/InitialsAvatar/InitialsAvatar.vue
@@ -0,0 +1,69 @@
+<template>
+	<div :class="classes">
+		<span v-if="initials">{{ initials }}</span>
+		<Icon v-else icon="User" :class="shrink ? 'h-3 w-3' : 'h-5 w-5'"></Icon>
+	</div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import Icon from '../Icon/Icon.vue';
+const props = defineProps({
+	/** User's given name */
+	givenName: {
+		type: String,
+		required: true,
+	},
+	/** User's family name  */
+	familyName: {
+		type: String,
+		default: '',
+	},
+	/** If the background should use primary color (blue) */
+	isPrimary: {
+		type: Boolean,
+		default: true,
+	},
+	/** If the background should use secondary color (white) */
+	isSecondary: {
+		type: Boolean,
+		default: false,
+	},
+	/** If the background should use negative color (red) */
+	isWarnable: {
+		type: Boolean,
+		default: false,
+	},
+	/** Use the disabled text color (gray) */
+	isDisabled: {
+		type: Boolean,
+		default: false,
+	},
+	/** Whether the avatar should be smaller in size */
+	shrink: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const initials = computed(() => {
+	return `${props.givenName?.charAt(0) || ''}${props.familyName?.charAt(0) || ''}`.toUpperCase();
+});
+
+const classes = computed(() => ({
+	// Base
+	'inline-flex items-center justify-center align-middle rounded-full p-1 cursor-pointer': true,
+	'h-8 w-8 text-3xl-medium': !props.shrink,
+	'h-5 w-5 text-base-normal': props.shrink,
+	// Default
+	'bg-primary text-on-dark hover:text-on-dark hover:bg-hover':
+		props.isPrimary && !props.isSecondary && !props.isWarnable,
+	// Is secondary
+	'bg-secondary': props.isSecondary,
+	'text-primary': props.isSecondary && !props.isDisabled,
+	// Is warnable
+	'bg-negative text-on-dark': props.isWarnable,
+	// Is disabled
+	'text-disabled': props.isDisabled,
+}));
+</script>
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 0ab52503b..ec832a321 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 a1d38e5f1..2f4f98c5f 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..6bb0ab568 100644
--- a/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
+++ b/src/components/ListPanel/submissionFiles/SubmissionFilesListItem.vue
@@ -43,10 +43,10 @@
 			</div>
 			<div v-if="!item.genreId" class="listPanel--submissionFiles__setGenre">
 				<span role="alert">
-					<Icon icon="exclamation-triangle" :inline="true" />
+					<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
 					<span
 						:id="genrePromptId"
-						class="listPanel--submissionFiles__setGenreLabel"
+						class="listPanel--submissionFiles__setGenreLabel align-middle"
 					>
 						{{ genrePromptLabel }}
 					</span>
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 e66332bf6..a0a164a57 100644
--- a/src/components/ListPanel/submissions/SubmissionsListItem.vue
+++ b/src/components/ListPanel/submissions/SubmissionsListItem.vue
@@ -57,9 +57,12 @@
 				>
 					<span v-html="reviewerWorkflowLink" />
 				</div>
-				<div v-else-if="notice" class="listPanel__item--submission__notice">
-					<Icon icon="exclamation-triangle" :inline="true" />
-					{{ notice }}
+				<div
+					v-else-if="notice"
+					class="listPanel__item--submission__notice space-x-1"
+				>
+					<Icon icon="Error" class="h-4 w-4" :inline="true" />
+					<span class="align-middle">{{ notice }}</span>
 					<button
 						v-if="shouldAssignEditor"
 						class="-linkButton"
@@ -81,17 +84,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>
@@ -116,15 +131,20 @@
 						v-if="currentUserLatestReviewAssignment.reviewCancelled"
 						class="listPanel__item--submission__reviewCancelled"
 					>
-						<Icon icon="exclamation-triangle" :inline="true" />
-						{{ t('submission.list.reviewCancelled') }}
+						<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
+						<span class="align-middle">
+							{{ t('submission.list.reviewCancelled') }}
+						</span>
 					</div>
-					<div
-						v-if="currentUserLatestReviewAssignment.reviewComplete"
-						class="listPanel__item--submission__reviewComplete"
-					>
-						<Icon icon="check" :inline="true" />
-						{{ t('submission.list.reviewComplete') }}
+					<div v-if="currentUserLatestReviewAssignment.reviewComplete">
+						<Icon
+							icon="Complete"
+							class="me-1 h-4 w-4 text-success"
+							:inline="true"
+						/>
+						<span class="align-middle">
+							{{ t('submission.list.reviewComplete') }}
+						</span>
 					</div>
 				</template>
 
@@ -166,21 +186,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 +950,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 +971,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..2be349893 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,29 +45,29 @@
 							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" />
-					{{ currentlyAssignedLabel }}
+					<Icon icon="Error" class="me-1 h-4 w-4" :inline="true" />
+					<span class="align-middle">{{ currentlyAssignedLabel }}</span>
 				</div>
 				<div
 					v-else-if="assignedToLastRound"
 					class="listPanel__item--reviewer__notice"
 				>
-					<Icon icon="thumb-tack" :inline="true" />
-					{{ assignedToLastRoundLabel }}
+					<Icon icon="Pin" class="me-1 h-3 w-3" :inline="true" />
+					<span class="align-middle">{{ assignedToLastRoundLabel }}</span>
 				</div>
 				<div
 					v-else-if="warnOnAssignment && !isWarningBypassed"
-					class="listPanel__item--reviewer__notice"
+					class="listPanel__item--reviewer__notice space-x-1"
 				>
-					<Icon icon="lock" :inline="true" />
-					{{ warnOnAssignmentLabel }}
+					<Icon icon="Lock" class="me-1 h-3 w-3" :inline="true" />
+					<span class="align-middle">{{ warnOnAssignmentLabel }}</span>
 					<button
 						class="listPanel__item--reviewer__noticeAction"
 						@click.prevent="unlockAssignment"
@@ -88,19 +84,21 @@
 					aria-hidden="true"
 				>
 					<span class="listPanel__item--reviewer__complete">
-						<Icon icon="check-circle-o" :inline="true" />
-						{{ item.reviewsCompleted }}
+						<Icon icon="Complete" class="h-4 w-4 text-default" :inline="true" />
+						<span class="align-middle">{{ item.reviewsCompleted }}</span>
 					</span>
 					<span class="listPanel__item--reviewer__last">
-						<Icon icon="history" :inline="true" />
-						{{ daysSinceLastAssignmentLabelCompiled }}
+						<Icon icon="History" class="h-4 w-4 text-default" :inline="true" />
+						<span class="align-middle">
+							{{ daysSinceLastAssignmentLabelCompiled }}
+						</span>
 					</span>
 					<span
 						v-if="item.interests.length"
 						class="listPanel__item--reviewer__interests"
 					>
-						<Icon icon="book" :inline="true" />
-						{{ interestsString }}
+						<Icon icon="Book" class="h-4 w-4 text-default" :inline="true" />
+						<span class="align-middle">{{ interestsString }}</span>
 					</span>
 					<span
 						v-if="affiliationMatch(item.affiliation)"
@@ -140,49 +138,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 +539,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 f7d83cd2d..a9e93e0cd 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -51,14 +51,14 @@
 										class="modal__closeButton__x"
 									/>
 									<Icon
-										icon="chevron-left"
+										icon="ChevronLeft"
 										:aria-hidden="true"
-										class="modal__closeButton__left"
+										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..96daa3570 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.
+				<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+				<span class="align-middle">
+					This submission does not have any contributors. At least one contributor
+					must be provided.
+				</span>
 			</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..1cc68d49e 100644
--- a/src/components/Panel/Panel.stories.js
+++ b/src/components/Panel/Panel.stories.js
@@ -28,24 +28,26 @@ 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" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 		</PanelSection>
@@ -74,24 +76,26 @@ 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" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 				</PanelSection>
@@ -106,24 +110,26 @@ 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" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 				</PanelSection>
@@ -152,24 +158,26 @@ 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" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 				</PanelSection>
@@ -184,24 +192,26 @@ 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" />
-							This journal is not currently available for the public to view. Would
-							you like to
-							<a href="#">make it public</a>
-							?
+							<Icon icon="Error" class="h-5 w-5 me-1" :inline="true" />
+							<span class="align-middle">
+								This journal is not currently available for the public to view. Would
+								you like to
+								<a href="#">make it public</a>
+								?
+							</span>
 						</ListItem>
 					</List>
 				</PanelSection>
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.stories.js b/src/components/Tooltip/Tooltip.stories.js
index f02933283..18f8571eb 100644
--- a/src/components/Tooltip/Tooltip.stories.js
+++ b/src/components/Tooltip/Tooltip.stories.js
@@ -22,3 +22,10 @@ export const Default = {
 		label: 'Tooltip for the demonstration component.',
 	},
 };
+
+export const IsPrimary = {
+	args: {
+		tooltip: 'This tooltip uses the primary color for the icon',
+		isPrimary: true,
+	},
+};
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index dd2ec82c8..52f035270 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,12 @@
 		class="tooltipButton"
 		@click.prevent
 	>
-		<Icon icon="question-circle" />
-		<span class="-screenReader">{{ label }}</span>
-	</button>
+		<Icon
+			:icon="isPrimary ? 'UsefulTipsPrimary' : 'UsefulTips'"
+			:class="iconClass"
+		/>
+		<span v-if="label" class="-screenReader">{{ label }}</span>
+	</span>
 </template>
 
 <script>
@@ -30,6 +33,28 @@ export default {
 			type: String,
 			required: true,
 		},
+		/** Indicates the icon size: medium (16px), small (14 px) */
+		iconSize: {
+			type: String,
+			default: () => 'medium',
+			validator: (value) => {
+				return ['medium', 'small'].includes(value);
+			},
+		},
+		/** If the icon color should use primary color (blue) */
+		isPrimary: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		iconClass() {
+			return {
+				'h-4 w-4': this.iconSize !== 'small',
+				'h-3 w-3': this.iconSize === 'small',
+				'text-primary': this.isPrimary,
+			};
+		},
 	},
 };
 </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/managers/UserInvitationManager/UserInvitationManager.vue b/src/managers/UserInvitationManager/UserInvitationManager.vue
index ac10cee6e..bf78843a3 100755
--- a/src/managers/UserInvitationManager/UserInvitationManager.vue
+++ b/src/managers/UserInvitationManager/UserInvitationManager.vue
@@ -27,18 +27,21 @@
 		<TableBody>
 			<TableRow v-for="(invitation, index) in store.invitations" :key="index">
 				<TableCell>
-					<span class="text-lg-normal">
-						{{
-							invitation.userId
-								? invitation.existingUser.fullName
-								: invitation.newUser.fullName
-						}}
+					<span class="space-x-1">
+						<span class="align-middle text-lg-normal">
+							{{
+								invitation.userId
+									? invitation.existingUser.fullName
+									: invitation.newUser.fullName
+							}}
+						</span>
+						<Icon
+							v-if="invitation.existingUser?.orcid || invitation.newUser?.orcid"
+							icon="Orcid"
+							class="h-4 w-4"
+							:inline="true"
+						/>
 					</span>
-					<Icon
-						v-if="invitation.existingUser?.orcid || invitation.newUser?.orcid"
-						icon="orcid"
-						:inline="true"
-					/>
 				</TableCell>
 				<TableCell>
 					<span class="text-lg-normal">
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/statsPublications/PublicationsDownloadReportModal.vue b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
index d21e19904..45c1c3558 100644
--- a/src/pages/statsPublications/PublicationsDownloadReportModal.vue
+++ b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
@@ -64,7 +64,7 @@
 			</ActionPanel>
 			<ActionPanel v-if="geoReportType" class="pkpStats__reportAction">
 				<h2>
-					{{ t('common.geographic') }}
+					<span class="align-middle">{{ t('common.geographic') }}</span>
 					<Tooltip
 						:tooltip="t('stats.geographic.ccAttribution')"
 						:label="t('stats.geographic.tooltip.label')"
diff --git a/src/pages/userInvitation/UserInvitationDetailsFormStep.vue b/src/pages/userInvitation/UserInvitationDetailsFormStep.vue
index 7521b494a..ce0e97851 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"
 			/>