Merge develop into fix/ui-improvements-logs-incidents

Resolve conflicts in IncidentItem.jsx and StatisticsPanel.jsx by
keeping the UI improvements from this branch while adopting the
new Lucide Icon component from develop (replacing old SVG imports).

client/src/Pages/Account/components/AddMemberMenu/index.jsx

@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@emotion/react";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 import Proptypes from "prop-types";
 
@@ -24,7 +24,13 @@ const AddMemberMenu = ({ handleInviteOpen, handleIsRegisterOpen }) => {
 			<Button
 				variant="contained"
 				color="accent"
-				endIcon={<ArrowDropDownIcon sx={{ color: theme.palette.secondary.light }} />}
+				endIcon={
+					<Icon
+						name="ChevronDown"
+						size={20}
+						color="secondary.light"
+					/>
+				}
 				onClick={handleClick}
 			>
 				{t("teamPanel.addTeamMember.addMemberMenu")}

client/src/Pages/Account/components/RoleTable/index.jsx

@@ -1,6 +1,6 @@
 import Typography from "@mui/material/Typography";
 import DataTable from "@/Components/v1/Table/index.jsx";
-import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
+import Icon from "@/Components/v1/Icon";
 
 import { useTranslation } from "react-i18next";
 import { ROLES } from "../../../../Utils/roleUtils.js";
@@ -21,11 +21,13 @@ const RoleTable = ({ roles, handleDeleteRole }) => {
 			render: (row) => {
 				if (row === ROLES.SUPERADMIN) return null;
 				return (
-					<DeleteOutlineRoundedIcon
+					<Icon
+						name="Trash2"
+						size={20}
 						onClick={() => {
 							handleDeleteRole(row);
 						}}
-						sx={{ cursor: "pointer" }}
+						style={{ cursor: "pointer" }}
 					/>
 				);
 			},

client/src/Pages/Auth/CheckEmail.jsx

@@ -7,9 +7,9 @@ import { createToast } from "../../Utils/toastUtils.jsx";
 import { forgotPassword } from "../../Features/Auth/authSlice.js";
 import { Trans, useTranslation } from "react-i18next";
 import Background from "@/assets/Images/background-grid.svg?react";
-import EmailIcon from "@/assets/icons/email.svg?react";
 import Logo from "@/assets/icons/checkmate-icon.svg?react";
 import IconBox from "@/Components/v1/IconBox/index.jsx";
+import Icon from "@/Components/v1/Icon";
 import "./index.css";
 
 const CheckEmail = () => {
@@ -160,7 +160,7 @@ const CheckEmail = () => {
 								svgHeight={24}
 								mb={theme.spacing(4)}
 							>
-								<EmailIcon alt={t("auth.forgotPassword.imageAlts.email")} />
+								<Icon name="Mail" />
 							</IconBox>
 						</Stack>
 						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>

client/src/Pages/Auth/ForgotPassword.jsx

@@ -8,9 +8,9 @@ import { newOrChangedCredentials } from "../../Validation/validation.js";
 import { useNavigate } from "react-router-dom";
 import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
 import Logo from "@/assets/icons/checkmate-icon.svg?react";
-import Key from "@/assets/icons/key.svg?react";
 import Background from "@/assets/Images/background-grid.svg?react";
 import IconBox from "@/Components/v1/IconBox/index.jsx";
+import Icon from "@/Components/v1/Icon";
 import { Trans, useTranslation } from "react-i18next";
 import "./index.css";
 
@@ -165,7 +165,7 @@ const ForgotPassword = () => {
 								svgHeight={24}
 								mb={theme.spacing(4)}
 							>
-								<Key alt={t("auth.forgotPassword.imageAlts.passwordKey")} />
+								<Icon name="Key" />
 							</IconBox>
 						</Stack>
 						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>

client/src/Pages/Auth/NewPasswordConfirmed.jsx

@@ -4,9 +4,9 @@ import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice.js";
 import Background from "@/assets/Images/background-grid.svg?react";
-import ConfirmIcon from "@/assets/icons/check-outlined.svg?react";
 import Logo from "@/assets/icons/checkmate-icon.svg?react";
 import IconBox from "@/Components/v1/IconBox/index.jsx";
+import Icon from "@/Components/v1/Icon";
 import { Trans, useTranslation } from "react-i18next";
 import "./index.css";
 
@@ -94,7 +94,7 @@ const NewPasswordConfirmed = () => {
 								svgHeight={24}
 								mb={theme.spacing(4)}
 							>
-								<ConfirmIcon alt={t("auth.forgotPassword.imageAlts.passwordConfirm")} />
+								<Icon name="CheckCircle" />
 							</IconBox>
 						</Stack>
 						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>

client/src/Pages/Auth/SetNewPassword.jsx

@@ -11,9 +11,9 @@ import Check from "@/Components/v1/Check/Check.jsx";
 import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
 import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
 import IconBox from "@/Components/v1/IconBox/index.jsx";
-import LockIcon from "@/assets/icons/lock.svg?react";
 import Logo from "@/assets/icons/checkmate-icon.svg?react";
 import Background from "@/assets/Images/background-grid.svg?react";
+import Icon from "@/Components/v1/Icon";
 import "./index.css";
 import { useValidatePassword } from "./hooks/useValidatePassword.jsx";
 import { Trans, useTranslation } from "react-i18next";
@@ -140,7 +140,7 @@ const SetNewPassword = () => {
 								svgHeight={24}
 								mb={theme.spacing(4)}
 							>
-								<LockIcon alt={t("auth.forgotPassword.imageAlts.lock")} />
+								<Icon name="Lock" />
 							</IconBox>
 						</Stack>
 						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>

client/src/Pages/Incidents/Components/StatusBoxes/StatusBox.jsx

@@ -2,10 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
 import Background from "@/assets/Images/background-grid.svg?react";
-import AlertIcon from "@/assets/icons/alert-icon.svg?react";
-import CheckIcon from "@/assets/icons/check-icon.svg?react";
-import CloseIcon from "@/assets/icons/close-icon.svg?react";
-import WarningIcon from "@/assets/icons/warning-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 
 const StatusBox = ({ title, value, status }) => {
 	const theme = useTheme();
@@ -26,28 +23,40 @@ const StatusBox = ({ title, value, status }) => {
 		color = theme.palette.success.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<CheckIcon />
+				<Icon
+					name="CheckCircle"
+					size={20}
+				/>
 			</Box>
 		);
 	} else if (status === "down") {
 		color = theme.palette.error.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<CloseIcon />
+				<Icon
+					name="X"
+					size={20}
+				/>
 			</Box>
 		);
 	} else if (status === "paused") {
 		color = theme.palette.warning.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<WarningIcon />
+				<Icon
+					name="AlertTriangle"
+					size={20}
+				/>
 			</Box>
 		);
 	} else {
 		color = theme.palette.accent.main;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<AlertIcon />
+				<Icon
+					name="Bell"
+					size={20}
+				/>
 			</Box>
 		);
 	}

client/src/Pages/Incidents2/Components/ActiveIncidentsPanel/index.jsx

@@ -3,8 +3,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
-import Incidents from "@/assets/icons/incidents.svg?react";
-import CheckIcon from "@/assets/icons/check-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import SummaryCard from "../SummaryCard/index.jsx";
 
 /**
@@ -63,7 +62,10 @@ const ActiveIncidentsPanel = ({ totalCount = 0, isLoading = false, error = null
 							mb: theme.spacing(1),
 						}}
 					>
-						<CheckIcon />
+						<Icon
+							name="CheckCircle"
+							size={60}
+						/>
 					</Box>
 
 					<Typography
@@ -101,7 +103,10 @@ const ActiveIncidentsPanel = ({ totalCount = 0, isLoading = false, error = null
 						},
 					}}
 				>
-					<Incidents />
+					<Icon
+						name="AlertTriangle"
+						size={60}
+					/>
 				</Box>
 
 				<Typography

client/src/Pages/Incidents2/Components/LatestIncidentsPanel/IncidentItem.jsx

@@ -3,7 +3,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { StatusLabel } from "@/Components/v1/Label/index.jsx";
 import { getHumanReadableDuration } from "@/Utils/timeUtils.js";
-import Monitors from "@/assets/icons/monitors.svg?react";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 
 const IncidentItem = ({ incident }) => {
@@ -67,7 +67,7 @@ const IncidentItem = ({ incident }) => {
 				gap={theme.spacing(2)}
 			>
 				<Box sx={iconWrapperStyle}>
-					<Monitors />
+					<Icon name="Globe" size={18} />
 				</Box>
 				<Typography
 					variant="body1"

client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx

@@ -3,9 +3,7 @@ import { Box, Stack, Typography, Divider } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
 import { useTranslation } from "react-i18next";
-import Clock from "@/assets/icons/maintenance.svg?react";
-import Incidents from "@/assets/icons/incidents.svg?react";
-import NotificationIcon from "@/assets/icons/notifications.svg?react";
+import Icon from "@/Components/v1/Icon";
 import SummaryCard from "../SummaryCard/index.jsx";
 
 /**
@@ -33,10 +31,6 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
 	const { t } = useTranslation();
 	const totalResolutions =
 		(summary?.totalManualResolutions || 0) + (summary?.totalAutomaticResolutions || 0);
-	const automaticPercentage =
-		totalResolutions > 0
-			? (summary?.totalAutomaticResolutions / totalResolutions) * 100
-			: 0;
 
 	const iconWrapperStyle = {
 		display: "flex",
@@ -102,7 +96,7 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
 						sx={rowStyle}
 					>
 						<Box sx={iconWrapperStyle}>
-							<NotificationIcon />
+							<Icon name="Bell" size={18} />
 						</Box>
 						<Typography
 							variant="body1"
@@ -121,7 +115,7 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
 						sx={rowStyle}
 					>
 						<Box sx={iconWrapperStyle}>
-							<Incidents />
+							<Icon name="AlertTriangle" size={18} />
 						</Box>
 						<Typography
 							variant="body1"
@@ -139,7 +133,7 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
 					sx={rowStyle}
 				>
 					<Box sx={iconWrapperStyle}>
-						<Clock />
+						<Icon name="Wrench" size={18} />
 					</Box>
 					<Typography
 						variant="body1"

client/src/Pages/Incidents2/index.jsx

@@ -87,8 +87,8 @@ const Incidents2 = () => {
 
 	useEffect(() => {
 		const lookup = monitors?.reduce((acc, monitor) => {
-			acc[monitor._id] = {
-				_id: monitor._id,
+			acc[monitor.id] = {
+				_id: monitor.id,
 				name: monitor.name,
 				type: monitor.type,
 			};

client/src/Pages/Infrastructure/Create/Components/MonitorActionButtons.jsx

@@ -2,8 +2,7 @@ import { useState } from "react";
 import { Box, Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
+import Icon from "@/Components/v1/Icon";
 import Dialog from "@/Components/v1/Dialog/index.jsx";
 import PropTypes from "prop-types";
 
@@ -36,12 +35,18 @@ const MonitorActionButtons = ({ monitor, isBusy, handlePause, handleRemove }) =>
 			>
 				{monitor?.isActive ? (
 					<>
-						<PauseCircleOutlineIcon />
+						<Icon
+							name="PauseCircle"
+							size={20}
+						/>
 						{t("pause")}
 					</>
 				) : (
 					<>
-						<PlayCircleOutlineRoundedIcon />
+						<Icon
+							name="PlayCircle"
+							size={20}
+						/>
 						{t("resume")}
 					</>
 				)}

client/src/Pages/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx

@@ -61,7 +61,7 @@ const useInfrastructureSubmit = () => {
 		};
 
 		const finalForm = {
-			...(isCreate ? {} : { _id: monitorId }),
+			...(isCreate ? {} : { id: monitorId }),
 			...rest,
 			description: form.name,
 			type: "hardware",

client/src/Pages/Infrastructure/Create/index.jsx

@@ -22,9 +22,9 @@ import { useTranslation } from "react-i18next";
 import {
 	useDeleteMonitor,
 	useFetchGlobalSettings,
-	useFetchHardwareMonitorById,
+	useFetchMonitorById,
 	usePauseMonitor,
-} from "../../../Hooks/monitorHooks.js";
+} from "@/Hooks/monitorHooks.js";
 import useInfrastructureMonitorForm from "./hooks/useInfrastructureMonitorForm.jsx";
 import useValidateInfrastructureForm from "./hooks/useValidateInfrastructureForm.jsx";
 import useInfrastructureSubmit from "./hooks/useInfrastructureSubmit.jsx";
@@ -37,14 +37,16 @@ const CreateInfrastructureMonitor = () => {
 	const { t } = useTranslation();
 
 	// State
+	const [monitor, setMonitor] = useState(null);
 	const [https, setHttps] = useState(false);
 	const [updateTrigger, setUpdateTrigger] = useState(false);
 	const [availableDisks, setAvailableDisks] = useState([]);
 
 	// Fetch monitor details if editing
-	const [monitor, isLoading] = useFetchHardwareMonitorById({
+	const [isLoading] = useFetchMonitorById({
 		monitorId,
-		updateTrigger,
+		setMonitor,
+		updateTrigger: true,
 	});
 	const [deleteMonitor, isDeleting] = useDeleteMonitor();
 	const [globalSettings, globalSettingsLoading] = useFetchGlobalSettings();
@@ -150,8 +152,7 @@ const CreateInfrastructureMonitor = () => {
 
 	const handleRemove = async (event) => {
 		event.preventDefault();
-		const TEMP_MONITOR = { id: monitor._id };
-		await deleteMonitor({ monitor: TEMP_MONITOR, redirect: "/infrastructure" });
+		await deleteMonitor({ monitor, redirect: "/infrastructure" });
 	};
 
 	const isBusy =

client/src/Pages/Infrastructure/Monitors/Components/Filters/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import FilterHeader from "@/Components/v1/FilterHeader/index.jsx";
 import { useMemo } from "react";
 import { Box, Button } from "@mui/material";
-import ClearIcon from "@mui/icons-material/Clear";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 
 /**
@@ -68,7 +68,12 @@ const Filter = ({
 				color={theme.palette.primary.contrastText}
 				onClick={handleReset}
 				variant="contained"
-				endIcon={<ClearIcon />}
+				endIcon={
+					<Icon
+						name="X"
+						size={18}
+					/>
+				}
 				sx={{
 					visibility: isFilterActive ? "visible" : "hidden",
 				}}

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx

@@ -7,7 +7,7 @@ import { Stack } from "@mui/material";
 import { InfrastructureMenu } from "../MonitorsTableMenu/index.jsx";
 import LoadingSpinner from "../../../../Uptime/Monitors/Components/LoadingSpinner/index.jsx";
 // Assets
-import CPUChipIcon from "@/assets/icons/cpu-chip.svg?react";
+import Icon from "@/Components/v1/Icon";
 import CustomGauge from "@/Components/v1/Charts/CustomGauge/index.jsx";
 
 // Utils
@@ -67,9 +67,9 @@ const MonitorsTable = ({
 					alignItems={"center"}
 					gap=".25rem"
 				>
-					<CPUChipIcon
-						width={20}
-						height={20}
+					<Icon
+						name="Cpu"
+						size={20}
 					/>
 					{row.processor}
 				</Stack>

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx

@@ -5,7 +5,7 @@ import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { createToast } from "@/Utils/toastUtils.jsx";
 import { IconButton, Menu, MenuItem } from "@mui/material";
-import Settings from "@/assets/icons/settings-bold.svg?react";
+import Icon from "@/Components/v1/Icon";
 import PropTypes from "prop-types";
 import Dialog from "@/Components/v1/Dialog/index.jsx";
 import { networkService } from "@/Utils/NetworkService.js";
@@ -100,7 +100,10 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 				}}
 				ref={anchor}
 			>
-				<Settings />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu

client/src/Pages/Maintenance/CreateMaintenance/Components/MonitorList/index.jsx

@@ -1,6 +1,6 @@
 // Components
 import { Stack, Typography } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
+import Icon from "@/Components/v1/Icon";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
@@ -14,8 +14,10 @@ const MonitorListItem = ({ monitor, onDelete }) => {
 			width="100%"
 		>
 			<Typography flexGrow={1}>{monitor.name}</Typography>
-			<DeleteIcon
-				sx={{ cursor: "pointer" }}
+			<Icon
+				name="Trash2"
+				size={20}
+				style={{ cursor: "pointer" }}
 				onClick={() => onDelete(monitor)}
 			/>
 		</Stack>

client/src/Pages/Maintenance/CreateMaintenance/index.jsx

@@ -16,7 +16,7 @@ import useMaintenanceActions from "./hooks/useMaintenanceActions.jsx";
 
 import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
 import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
-import CalendarIcon from "@/assets/icons/calendar.svg?react";
+import Icon from "@/Components/v1/Icon";
 import "./index.css";
 import Search from "@/Components/v1/Inputs/Search/index.jsx";
 import { logger } from "@/Utils/Logger.js";
@@ -217,7 +217,14 @@ const CreateMaintenance = () => {
 									disablePast
 									disableHighlightToday
 									value={form.startDate}
-									slots={{ openPickerIcon: () => <CalendarIcon /> }}
+									slots={{
+										openPickerIcon: () => (
+											<Icon
+												name="Calendar"
+												size={20}
+											/>
+										),
+									}}
 									slotProps={{
 										switchViewButton: { sx: { display: "none" } },
 										nextIconButton: { sx: { ml: theme.spacing(2) } },

client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { IconButton, Menu, MenuItem } from "@mui/material";
 import { logger } from "@/Utils/Logger.js";
-import Settings from "@/assets/icons/settings-bold.svg?react";
+import Icon from "@/Components/v1/Icon";
 import PropTypes from "prop-types";
 import { networkService } from "../../../../main.jsx";
 import { createToast } from "@/Utils/toastUtils.jsx";
@@ -98,7 +98,10 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 					},
 				}}
 			>
-				<Settings />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu

client/src/Pages/Maintenance/MaintenanceTable/index.jsx

@@ -2,8 +2,7 @@ import PropTypes from "prop-types";
 import { Box } from "@mui/material";
 import DataTable from "@/Components/v1/Table/index.jsx";
 import Pagination from "@/Components/v1/Table/TablePagination/index.jsx";
-import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
-import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+import Icon from "@/Components/v1/Icon";
 import ActionsMenu from "./ActionsMenu/index.jsx";
 import { memo } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -68,9 +67,15 @@ const MaintenanceTable = ({
 						}}
 					>
 						{sort.order === "asc" ? (
-							<ArrowUpwardRoundedIcon />
+							<Icon
+								name="ArrowUp"
+								size={18}
+							/>
 						) : (
-							<ArrowDownwardRoundedIcon />
+							<Icon
+								name="ArrowDown"
+								size={18}
+							/>
 						)}
 					</span>
 				</Box>
@@ -89,9 +94,15 @@ const MaintenanceTable = ({
 						}}
 					>
 						{sort.order === "asc" ? (
-							<ArrowUpwardRoundedIcon />
+							<Icon
+								name="ArrowUp"
+								size={18}
+							/>
 						) : (
-							<ArrowDownwardRoundedIcon />
+							<Icon
+								name="ArrowDown"
+								size={18}
+							/>
 						)}
 					</span>
 				</Box>

client/src/Pages/Notifications/components/ActionMenu.jsx

@@ -1,7 +1,7 @@
 // Components
 import Menu from "@mui/material/Menu";
 import IconButton from "@mui/material/IconButton";
-import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import Icon from "@/Components/v1/Icon";
 import MenuItem from "@mui/material/MenuItem";
 
 // Utils
@@ -49,7 +49,10 @@ const ActionMenu = ({ notification, onDelete }) => {
 				onClick={handleClick}
 				onMouseDown={(e) => e.stopPropagation()}
 			>
-				<SettingsOutlinedIcon />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu

client/src/Pages/PageSpeed/Create/index.jsx

@@ -3,10 +3,9 @@ import { Box, Stack, Tooltip, Typography, Button, ButtonGroup } from "@mui/mater
 import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
 import Select from "@/Components/v1/Inputs/Select/index.jsx";
 import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
+import Icon from "@/Components/v1/Icon";
 import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
 import PulseDot from "@/Components/v1/Animated/PulseDot.jsx";
-import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
 import SkeletonLayout from "./skeleton.jsx";
 import NotificationsConfig from "@/Components/v1/NotificationConfig/index.jsx";
 import Dialog from "@/Components/v1/Dialog/index.jsx";
@@ -178,8 +177,7 @@ const PageSpeedSetup = () => {
 
 	const handleRemove = async (event) => {
 		event.preventDefault();
-		const TEMP_MONITOR = { id: monitor._id };
-		await deleteMonitor({ monitor: TEMP_MONITOR, redirect: "/pagespeed" });
+		await deleteMonitor({ monitor: { id: monitorId }, redirect: "/pagespeed" });
 	};
 
 	const isBusy = isLoading || isCreating || isDeleting || isUpdating || isPausing;
@@ -314,12 +312,18 @@ const PageSpeedSetup = () => {
 							>
 								{monitor?.isActive ? (
 									<>
-										<PauseCircleOutlineIcon />
+										<Icon
+											name="PauseCircle"
+											size={20}
+										/>
 										{t("pause")}
 									</>
 								) : (
 									<>
-										<PlayCircleOutlineRoundedIcon />
+										<Icon
+											name="PlayCircle"
+											size={20}
+										/>
 										{t("resume")}
 									</>
 								)}

client/src/Pages/PageSpeed/Details/Components/Charts/AreaChartLegend.jsx

@@ -1,6 +1,6 @@
 import { Box, Typography, Divider } from "@mui/material";
 import Checkbox from "@/Components/v1/Inputs/Checkbox/index.jsx";
-import MetricsIcon from "@/assets/icons/ruler-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import LegendBox from "@/Components/v1/Charts/LegendBox/index.jsx";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
@@ -10,7 +10,12 @@ const AreaChartLegend = ({ metrics, handleMetrics }) => {
 	const { t } = useTranslation();
 	return (
 		<LegendBox
-			icon={<MetricsIcon />}
+			icon={
+				<Icon
+					name="Ruler"
+					size={20}
+				/>
+			}
 			header="Metrics"
 		>
 			<Box>

client/src/Pages/PageSpeed/Details/Components/Charts/PieChartLegend.jsx

@@ -1,7 +1,7 @@
 import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import LegendBox from "@/Components/v1/Charts/LegendBox/index.jsx";
-import SpeedometerIcon from "@/assets/icons/speedometer-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import PropTypes from "prop-types";
 
 const PieChartLegend = ({ audits }) => {
@@ -9,7 +9,12 @@ const PieChartLegend = ({ audits }) => {
 
 	return (
 		<LegendBox
-			icon={<SpeedometerIcon />}
+			icon={
+				<Icon
+					name="Gauge"
+					size={20}
+				/>
+			}
 			header="Performance metrics"
 			sx={{ flex: 1 }}
 		>

client/src/Pages/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx

@@ -2,7 +2,7 @@ import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
 import AreaChart from "../Charts/AreaChart.jsx";
 import AreaChartLegend from "../Charts/AreaChartLegend.jsx";
 import SkeletonLayout from "./skeleton.jsx";
-import ScoreIcon from "@/assets/icons/monitor-graph-line.svg?react";
+import Icon from "@/Components/v1/Icon";
 import { Stack } from "@mui/material";
 import PropTypes from "prop-types";
 
@@ -24,7 +24,12 @@ const PageSpeedAreaChart = ({ shouldRender, monitor, metrics, handleMetrics }) =
 		>
 			<ChartBox
 				justifyContent="flex-start"
-				icon={<ScoreIcon />}
+				icon={
+					<Icon
+						name="TrendingUp"
+						size={20}
+					/>
+				}
 				header="Score history"
 				height="100%"
 				borderRadiusRight={16}

client/src/Pages/PageSpeed/Details/Components/PerformanceReport/index.jsx

@@ -1,5 +1,5 @@
 import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
-import PerformanceIcon from "@/assets/icons/performance-report.svg?react";
+import Icon from "@/Components/v1/Icon";
 import PieChart from "../Charts/PieChart.jsx";
 import { Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
@@ -17,7 +17,12 @@ const PerformanceReport = ({ shouldRender, audits }) => {
 
 	return (
 		<ChartBox
-			icon={<PerformanceIcon />}
+			icon={
+				<Icon
+					name="Layers"
+					size={20}
+				/>
+			}
 			header="Performance report"
 			Legend={<PieChartLegend audits={audits} />}
 			borderRadiusRight={16}

client/src/Pages/PageSpeed/Monitors/Components/Card/index.jsx

@@ -1,6 +1,5 @@
 import PropTypes from "prop-types";
-// import PageSpeedIcon from "../../../../assets/icons/page-speed.svg?react";
-import PageSpeedIcon from "@/assets/icons/page-speed.svg?react";
+import Icon from "@/Components/v1/Icon";
 import { StatusLabel } from "@/Components/v1/Label/index.jsx";
 import { Box, Grid, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
@@ -241,7 +240,10 @@ const Card = ({ monitor }) => {
 				}}
 			>
 				<IconBox>
-					<PageSpeedIcon />
+					<Icon
+						name="Gauge"
+						size={20}
+					/>
 				</IconBox>
 				<Typography
 					component="h2"

client/src/Pages/StatusPage/Create/Components/MonitorList/index.jsx

@@ -1,7 +1,6 @@
 // Components
 import { Stack, Typography } from "@mui/material";
-import ReorderRoundedIcon from "@mui/icons-material/ReorderRounded";
-import DeleteIcon from "@mui/icons-material/Delete";
+import Icon from "@/Components/v1/Icon";
 
 // Utils
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
@@ -28,10 +27,15 @@ const MonitorListItem = ({
 			justifyContent={"start"}
 			border={`1px solid ${theme.palette.primary.lowContrast}`}
 		>
-			<ReorderRoundedIcon />
+			<Icon
+				name="GripVertical"
+				size={20}
+			/>
 			<Typography>{monitor.name}</Typography>
-			<DeleteIcon
-				sx={{ marginLeft: "auto" }}
+			<Icon
+				name="Trash2"
+				size={20}
+				style={{ marginLeft: "auto", cursor: "pointer" }}
 				onClick={() => {
 					onDelete(monitor);
 				}}

client/src/Pages/StatusPage/Create/Components/Progress/index.jsx

@@ -1,6 +1,6 @@
 import { Button, Box } from "@mui/material";
 import ProgressUpload from "@/Components/v1/ProgressBars/index.jsx";
-import ImageIcon from "@mui/icons-material/Image";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 import { formatBytes } from "../../../../../Utils/fileUtils.js";
 const Progress = ({ isLoading, progressValue, logo, logoType, removeLogo, errors }) => {
@@ -8,7 +8,12 @@ const Progress = ({ isLoading, progressValue, logo, logoType, removeLogo, errors
 	if (isLoading) {
 		return (
 			<ProgressUpload
-				icon={<ImageIcon />}
+				icon={
+					<Icon
+						name="Image"
+						size={20}
+					/>
+				}
 				label={logo?.name}
 				size={formatBytes(logo?.size)}
 				progress={progressValue}

client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx

@@ -1,9 +1,8 @@
 // Components
 import { Box, Stack, Typography, Button } from "@mui/material";
 import Image from "@/Components/v1/Image/index.jsx";
-import SettingsIcon from "@/assets/icons/settings-bold.svg?react";
+import Icon from "@/Components/v1/Icon";
 import ThemeSwitch from "@/Components/v1/ThemeSwitch/index.jsx";
-import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
 //Utils
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
@@ -46,7 +45,12 @@ const Controls = ({ url, type }) => {
 						},
 					}}
 				>
-					<SettingsIcon /> {t("configure")}
+					<Icon
+						name="Settings"
+						size={18}
+						style={{ marginRight: "8px" }}
+					/>{" "}
+					{t("configure")}
 				</Button>
 			</Box>
 		</Stack>
@@ -111,7 +115,10 @@ const ControlsHeader = ({ statusPage, isPublic, url, type = "uptime" }) => {
 						}}
 					>
 						<Typography>{t("publicLink")}</Typography>
-						<ArrowOutwardIcon />
+						<Icon
+							name="ExternalLink"
+							size={18}
+						/>
 					</Stack>
 				)}
 			</Stack>

client/src/Pages/StatusPage/Status/Components/StatusBar/index.jsx

@@ -1,7 +1,6 @@
 // Components
 import { Stack, Typography } from "@mui/material";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import Icon from "@/Components/v1/Icon";
 
 // Utils
 import { useTheme } from "@mui/material/styles";
@@ -10,8 +9,10 @@ import PropTypes from "prop-types";
 const getMonitorStatus = (monitors, theme) => {
 	const monitorsStatus = {
 		icon: (
-			<ErrorOutlineIcon
-				sx={{ color: theme.palette.primary.contrastTextSecondaryDarkBg }}
+			<Icon
+				name="AlertTriangle"
+				size={24}
+				color="primary.contrastTextSecondaryDarkBg"
 			/>
 		),
 	};
@@ -19,8 +20,10 @@ const getMonitorStatus = (monitors, theme) => {
 		monitorsStatus.msg = "All systems operational";
 		monitorsStatus.color = theme.palette.success.lowContrast;
 		monitorsStatus.icon = (
-			<CheckCircleIcon
-				sx={{ color: theme.palette.primary.contrastTextSecondaryDarkBg }}
+			<Icon
+				name="CheckCircle2"
+				size={24}
+				color="primary.contrastTextSecondaryDarkBg"
 			/>
 		);
 	}

client/src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx

@@ -2,7 +2,7 @@ import DataTable from "@/Components/v1/Table/index.jsx";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { StatusLabel } from "@/Components/v1/Label/index.jsx";
-import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
+import Icon from "@/Components/v1/Icon";
 import { Stack, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 const StatusPagesTable = ({ data }) => {
@@ -48,7 +48,12 @@ const StatusPagesTable = ({ data }) => {
 						}}
 					>
 						<Typography>{content}</Typography>
-						{row.isPublished && <ArrowOutwardIcon />}
+						{row.isPublished && (
+							<Icon
+								name="ExternalLink"
+								size={18}
+							/>
+						)}
 					</Stack>
 				);
 			},

client/src/Pages/Uptime/Create/index.jsx

@@ -28,10 +28,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { monitorValidation } from "../../../Validation/validation.js";
 import { createToast } from "../../../Utils/toastUtils.jsx";
-import {
-	PauseOutlined as PauseOutlinedIcon,
-	PlayArrowOutlined as PlayArrowOutlinedIcon,
-} from "@mui/icons-material";
+import Icon from "@/Components/v1/Icon";
 import { useMonitorUtils } from "../../../Hooks/useMonitorUtils.js";
 import { useGetNotificationsByTeamId } from "../../../Hooks/useNotifications.js";
 import { useParams } from "react-router-dom";
@@ -429,7 +426,17 @@ const UptimeCreate = ({ isClone = false }) => {
 								color="secondary"
 								loading={isBusy}
 								startIcon={
-									monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+									monitor?.isActive ? (
+										<Icon
+											name="Pause"
+											size={18}
+										/>
+									) : (
+										<Icon
+											name="Play"
+											size={18}
+										/>
+									)
 								}
 								onClick={handlePause}
 							>

client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx

@@ -1,9 +1,7 @@
 // Components
 import { Stack, Typography, Box } from "@mui/material";
 import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
-import UptimeIcon from "@/assets/icons/uptime-icon.svg?react";
-import IncidentsIcon from "@/assets/icons/incidents.svg?react";
-import AverageResponseIcon from "@/assets/icons/average-response-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import UpBarChart from "../Charts/UpBarChart.jsx";
 import DownBarChart from "../Charts/DownBarChart.jsx";
 import ResponseGaugeChart from "../Charts/ResponseGaugeChart.jsx";
@@ -38,7 +36,12 @@ const ChartBoxes = ({
 			gap={theme.spacing(8)}
 		>
 			<ChartBox
-				icon={<UptimeIcon />}
+				icon={
+					<Icon
+						name="Activity"
+						size={20}
+					/>
+				}
 				header="Uptime"
 				isEmpty={monitorData?.groupedUpChecks?.length === 0}
 			>
@@ -89,7 +92,12 @@ const ChartBoxes = ({
 				/>
 			</ChartBox>
 			<ChartBox
-				icon={<IncidentsIcon />}
+				icon={
+					<Icon
+						name="AlertTriangle"
+						size={20}
+					/>
+				}
 				header="Incidents"
 				noDataMessage={noIncidentsMessage}
 				isEmpty={monitorData?.groupedDownChecks?.length === 0}
@@ -123,7 +131,12 @@ const ChartBoxes = ({
 				/>
 			</ChartBox>
 			<ChartBox
-				icon={<AverageResponseIcon />}
+				icon={
+					<Icon
+						name="BarChart3"
+						size={20}
+					/>
+				}
 				header="Average Response Time"
 			>
 				<ResponseGaugeChart avgResponseTime={monitorData?.groupedAvgResponseTime ?? 0} />

client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChart.jsx

@@ -1,6 +1,6 @@
 import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
 import MonitorDetailsAreaChart from "@/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx";
-import ResponseTimeIcon from "@/assets/icons/response-time-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import SkeletonLayout from "./ResponseTimeChartSkeleton.jsx";
 import PropTypes from "prop-types";
 
@@ -11,7 +11,12 @@ const ResponseTImeChart = ({ isLoading = false, groupedChecks = [], dateRange })
 
 	return (
 		<ChartBox
-			icon={<ResponseTimeIcon />}
+			icon={
+				<Icon
+					name="TrendingUp"
+					size={20}
+				/>
+			}
 			header="Response Times"
 		>
 			<MonitorDetailsAreaChart

client/src/Pages/Uptime/Details/Components/ResponseTable/index.jsx

@@ -1,6 +1,6 @@
 import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
 import PropTypes from "prop-types";
-import HistoryIcon from "@/assets/icons/history-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import Table from "@/Components/v1/Table/index.jsx";
 import TablePagination from "@/Components/v1/Table/TablePagination/index.jsx";
 import { StatusLabel } from "@/Components/v1/Label/index.jsx";
@@ -184,7 +184,12 @@ const ResponseTable = ({
 
 	return (
 		<ChartBox
-			icon={<HistoryIcon />}
+			icon={
+				<Icon
+					name="History"
+					size={20}
+				/>
+			}
 			header="Response Times"
 			height="100%"
 		>

client/src/Pages/Uptime/Monitors/Components/Filter/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import FilterHeader from "@/Components/v1/FilterHeader/index.jsx";
 import { useMemo } from "react";
 import { Box, Button } from "@mui/material";
-import ClearIcon from "@mui/icons-material/Clear";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 
 /**
@@ -131,7 +131,12 @@ const Filter = ({
 				color={theme.palette.primary.contrastText}
 				onClick={handleReset}
 				variant="contained"
-				endIcon={<ClearIcon />}
+				endIcon={
+					<Icon
+						name="X"
+						size={18}
+					/>
+				}
 				sx={{
 					visibility: isFilterActive ? "visible" : "hidden",
 				}}

client/src/Pages/Uptime/Monitors/Components/StatusBoxes/statusBox.jsx

@@ -1,9 +1,8 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
-import Arrow from "@/assets/icons/top-right-arrow.svg?react";
+import Icon from "@/Components/v1/Icon";
 import Background from "@/assets/Images/background-grid.svg?react";
-import ClockSnooze from "@/assets/icons/clock-snooze.svg?react";
 
 const StatusBox = ({ title, value, status }) => {
 	const theme = useTheme();
@@ -20,21 +19,30 @@ const StatusBox = ({ title, value, status }) => {
 		color = theme.palette.success.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(4) }}>
-				<Arrow />
+				<Icon
+					name="ArrowUpRight"
+					size={20}
+				/>
 			</Box>
 		);
 	} else if (status === "down") {
 		color = theme.palette.error.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: theme.spacing(2) }}>
-				<Arrow />
+				<Icon
+					name="ArrowUpRight"
+					size={20}
+				/>
 			</Box>
 		);
 	} else if (status === "paused") {
 		color = theme.palette.warning.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<ClockSnooze />
+				<Icon
+					name="Clock"
+					size={20}
+				/>
 			</Box>
 		);
 	}

client/src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx

@@ -1,8 +1,7 @@
 // Components
 import { Box, Stack } from "@mui/material";
 import DataTable from "@/Components/v1/Table/index.jsx";
-import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
-import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+import Icon from "@/Components/v1/Icon";
 import Host from "@/Components/v1/Host/index.jsx";
 import { StatusLabel } from "@/Components/v1/Label/index.jsx";
 import BarChart from "@/Components/v1/Charts/BarChart/index.jsx";
@@ -92,9 +91,15 @@ const UptimeDataTable = ({
 						}}
 					>
 						{sort?.order === "asc" ? (
-							<ArrowUpwardRoundedIcon />
+							<Icon
+								name="ArrowUp"
+								size={18}
+							/>
 						) : (
-							<ArrowDownwardRoundedIcon />
+							<Icon
+								name="ArrowDown"
+								size={18}
+							/>
 						)}
 					</Stack>
 				</Stack>
@@ -128,9 +133,15 @@ const UptimeDataTable = ({
 						}}
 					>
 						{sort?.order === "asc" ? (
-							<ArrowUpwardRoundedIcon fontSize="18px" />
+							<Icon
+								name="ArrowUp"
+								size={18}
+							/>
 						) : (
-							<ArrowDownwardRoundedIcon fontSize="18px" />
+							<Icon
+								name="ArrowDown"
+								size={18}
+							/>
 						)}
 					</Stack>
 				</Stack>