diff --git a/apps/meteor/client/components/GenericCard/GenericCard.tsx b/apps/meteor/client/components/GenericCard/GenericCard.tsx
index 007c7da9f15e8..335b8e6be959c 100644
--- a/apps/meteor/client/components/GenericCard/GenericCard.tsx
+++ b/apps/meteor/client/components/GenericCard/GenericCard.tsx
@@ -1,6 +1,5 @@
-import { Card, CardTitle, CardBody, CardControls, CardHeader } from '@rocket.chat/fuselage';
+import { Card, CardTitle, CardBody, CardControls, CardHeader, FramedIcon } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
-import { FramedIcon } from '@rocket.chat/ui-client';
 import type { ComponentProps, ReactElement } from 'react';
 import React from 'react';
 
@@ -11,17 +10,21 @@ type GenericCardProps = {
 	body: string;
 	buttons?: ReactElement<typeof GenericCardButton>[];
 	icon?: ComponentProps<typeof FramedIcon>['icon'];
-	type?: ComponentProps<typeof FramedIcon>['type'];
+	type?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
 } & ComponentProps<typeof Card>;
 
 export const GenericCard: React.FC<GenericCardProps> = ({ title, body, buttons, icon, type, ...props }) => {
 	const cardId = useUniqueId();
 	const descriptionId = useUniqueId();
 
+	const iconType = type && {
+		[type]: true,
+	};
+
 	return (
 		<Card role='region' aria-labelledby={cardId} aria-describedby={descriptionId} {...props}>
 			<CardHeader>
-				{icon && <FramedIcon icon={icon} type={type || 'neutral'} />}
+				{icon && <FramedIcon icon={icon} {...(type && iconType)} />}
 				<CardTitle id={cardId}>{title}</CardTitle>
 			</CardHeader>
 			<CardBody id={descriptionId}>{body}</CardBody>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx
index fbd70a844bdd3..8af99de7d38cc 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx
@@ -1,6 +1,5 @@
-import { Box, Card, CardBody, CardControls, CardTitle } from '@rocket.chat/fuselage';
+import { Box, Card, CardBody, CardControls, CardTitle, FramedIcon } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
-import { FramedIcon } from '@rocket.chat/ui-client';
 import type { ReactElement } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +8,8 @@ import { PRICING_LINK } from '../../utils/links';
 import InfoTextIconModal from '../InfoTextIconModal';
 
 type FeatureSet = {
-	type: 'neutral' | 'success';
+	success?: boolean;
+	neutral?: boolean;
 	title: string;
 	infoText?: string;
 };
@@ -19,68 +19,59 @@ type FeaturesCardProps = {
 	isEnterprise: boolean;
 };
 
+const getFeatureSet = (modules: string[], isEnterprise: boolean): FeatureSet[] => {
+	const featureSet: FeatureSet[] = [
+		{
+			success: isEnterprise,
+			title: 'Premium_and_unlimited_apps',
+		},
+		{
+			success: isEnterprise,
+			title: 'Premium_omnichannel_capabilities',
+		},
+		{
+			success: isEnterprise,
+			title: 'Unlimited_push_notifications',
+		},
+		{
+			success: modules.includes('videoconference-enterprise'),
+			title: 'Video_call_manager',
+		},
+		{
+			success: modules.includes('hide-watermark'),
+			title: 'Remove_RocketChat_Watermark',
+			infoText: 'Remove_RocketChat_Watermark_InfoText',
+		},
+		{
+			success: modules.includes('scalability'),
+			title: 'High_scalabaility',
+		},
+		{
+			success: modules.includes('custom-roles'),
+			title: 'Custom_roles',
+		},
+		{
+			success: modules.includes('auditing'),
+			title: 'Message_audit',
+		},
+	];
+
+	// eslint-disable-next-line no-nested-ternary
+	return featureSet.sort(({ success: a }, { success: b }) => (a === b ? 0 : a ? -1 : 1));
+};
+
 const FeaturesCard = ({ activeModules, isEnterprise }: FeaturesCardProps): ReactElement => {
 	const { t } = useTranslation();
 	const isSmall = useMediaQuery('(min-width: 1180px)');
 
-	const getFeatureSet = (modules: string[], isEnterprise: boolean): FeatureSet[] => {
-		const featureSet: FeatureSet[] = [
-			{
-				type: isEnterprise ? 'success' : 'neutral',
-				title: 'Premium_and_unlimited_apps',
-			},
-			{
-				type: isEnterprise ? 'success' : 'neutral',
-				title: 'Premium_omnichannel_capabilities',
-			},
-			{
-				type: isEnterprise ? 'success' : 'neutral',
-				title: 'Unlimited_push_notifications',
-			},
-			{
-				type: modules.includes('videoconference-enterprise') ? 'success' : 'neutral',
-				title: 'Video_call_manager',
-			},
-			{
-				type: modules.includes('hide-watermark') ? 'success' : 'neutral',
-				title: 'Remove_RocketChat_Watermark',
-				infoText: 'Remove_RocketChat_Watermark_InfoText',
-			},
-			{
-				type: modules.includes('scalability') ? 'success' : 'neutral',
-				title: 'High_scalabaility',
-			},
-			{
-				type: modules.includes('custom-roles') ? 'success' : 'neutral',
-				title: 'Custom_roles',
-			},
-			{
-				type: modules.includes('auditing') ? 'success' : 'neutral',
-				title: 'Message_audit',
-			},
-		];
-
-		const sortedFeatureSet = featureSet.sort((a, b) => {
-			if (a.type === 'success' && b.type !== 'success') {
-				return -1;
-			}
-			if (a.type !== 'success' && b.type === 'success') {
-				return 1;
-			}
-			return featureSet.indexOf(a) - featureSet.indexOf(b);
-		});
-
-		return sortedFeatureSet;
-	};
-
 	return (
 		<Card>
 			<CardTitle>{!isEnterprise ? t('Unlock_premium_capabilities') : t('Includes')}</CardTitle>
 			<CardBody>
 				<Box display='flex' flexWrap='wrap' justifyContent='space-between' flexDirection={isSmall ? 'row' : 'column'}>
-					{getFeatureSet(activeModules, isEnterprise).map(({ type, title, infoText }, index) => (
+					{getFeatureSet(activeModules, isEnterprise).map(({ success, title, infoText }, index) => (
 						<Box key={`feature_${index}`} display='flex' alignItems='center' mbe={4} width={isSmall ? '50%' : 'full'}>
-							<FramedIcon type={type} icon={type === 'success' ? 'check' : 'lock'} />
+							<FramedIcon success={success} icon={success ? 'check' : 'lock'} />
 							<Box is='p' fontScale='p2' mis={12} mie={2} color='font-secondary-info'>
 								{t(title)}
 							</Box>
diff --git a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
index c3e239c22b8e0..3298f38b0f114 100644
--- a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
@@ -1,5 +1,5 @@
 import type { IStats } from '@rocket.chat/core-typings';
-import { Button, Card, CardControls } from '@rocket.chat/fuselage';
+import { Button, Card, CardBody, CardControls } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -28,41 +28,43 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 
 	return (
 		<Card height='full'>
-			<WorkspaceCardSection
-				title={t('Users')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
-						<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
-						<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
-						<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
-						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
-					</>
-				}
-			/>
+			<CardBody flexDirection='column'>
+				<WorkspaceCardSection
+					title={t('Users')}
+					body={
+						<>
+							<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
+							<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
+							<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
+							<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
+							<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
+						</>
+					}
+				/>
 
-			<WorkspaceCardSection
-				title={t('Types')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
-						<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
-						<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
-						<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
-						<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
-					</>
-				}
-			/>
+				<WorkspaceCardSection
+					title={t('Types')}
+					body={
+						<>
+							<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
+							<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
+							<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
+							<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
+							<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
+						</>
+					}
+				/>
 
-			<WorkspaceCardSection
-				title={t('Uploads')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
-						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
-					</>
-				}
-			/>
+				<WorkspaceCardSection
+					title={t('Uploads')}
+					body={
+						<>
+							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
+							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
+						</>
+					}
+				/>
+			</CardBody>
 
 			<CardControls>
 				<Button disabled={!canViewEngagement} medium onClick={handleEngagement}>
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
index 8de30058bc3d5..1f4ba9a75d34a 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
@@ -113,17 +113,15 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 			[
 				isOverLimits
 					? {
-							type: 'danger',
+							danger: true,
 							icon: 'warning',
 							label: t('Plan_limits_reached'),
 					  }
 					: {
-							type: 'neutral',
 							icon: 'check',
 							label: t('Operating_withing_plan_limits'),
 					  },
 				(isAirgapped || !versions) && {
-					type: 'neutral',
 					icon: 'warning',
 					label: (
 						<Trans i18nKey='Check_support_availability'>
@@ -136,7 +134,6 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 
 				versionStatus?.label !== 'outdated' &&
 					versionStatus?.expiration && {
-						type: 'neutral',
 						icon: 'check',
 						label: (
 							<Trans i18nKey='Version_supported_until' values={{ date: formatDate(versionStatus?.expiration) }}>
@@ -147,7 +144,7 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 						),
 					},
 				versionStatus?.label === 'outdated' && {
-					type: 'danger',
+					danger: true,
 					icon: 'warning',
 					label: (
 						<Trans i18nKey='Version_not_supported'>
@@ -158,17 +155,16 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 				},
 				isRegistered
 					? {
-							type: 'neutral',
 							icon: 'check',
 							label: t('Workspace_registered'),
 					  }
 					: {
-							type: 'danger',
+							danger: true,
 							icon: 'warning',
 							label: t('Workspace_not_registered'),
 					  },
 			].filter(Boolean) as VersionActionItem[]
-		).sort((a) => (a.type === 'danger' ? -1 : 1));
+		).sort((a) => (a.danger ? -1 : 1));
 	}, [isOverLimits, t, isAirgapped, versions, versionStatus?.label, versionStatus?.expiration, formatDate, isRegistered]);
 
 	if (isLoading && !licenseData) {
@@ -193,7 +189,7 @@ const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
 			</CardCol>
 
 			<CardBody flexDirection='column'>
-				{actionItems.length > 0 && actionItems.map((item, index) => <VersionCardActionItem key={index} actionItem={item} />)}
+				{actionItems.length > 0 && actionItems.map((item, index) => <VersionCardActionItem key={index} {...item} />)}
 			</CardBody>
 
 			{actionButton && (
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx
index fa444f0dac705..afbbd63fddcda 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx
@@ -1,24 +1,21 @@
-import { Box } from '@rocket.chat/fuselage';
+import { Box, FramedIcon } from '@rocket.chat/fuselage';
 import type { Keys } from '@rocket.chat/icons';
-import { FramedIcon } from '@rocket.chat/ui-client';
 import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
 export type VersionActionItem = {
-	type: 'danger' | 'neutral';
+	danger?: boolean;
 	icon: Keys;
 	label: ReactNode;
 };
 
-type VersionCardActionItemProps = {
-	actionItem: VersionActionItem;
-};
+type VersionCardActionItemProps = VersionActionItem;
 
-const VersionCardActionItem = ({ actionItem }: VersionCardActionItemProps): ReactElement => {
+const VersionCardActionItem = ({ icon, label, danger }: VersionCardActionItemProps): ReactElement => {
 	return (
-		<Box display='flex' alignItems='center' color={actionItem.type === 'danger' ? 'danger' : 'secondary-info'} fontScale='p2m'>
-			<FramedIcon type={actionItem.type} icon={actionItem.icon} />
-			<Box mis={12}>{actionItem.label}</Box>
+		<Box display='flex' alignItems='center' color={danger ? 'danger' : 'secondary-info'} fontScale='p2m'>
+			<FramedIcon danger={danger} icon={icon} />
+			<Box mis={12}>{label}</Box>
 		</Box>
 	);
 };
diff --git a/packages/ui-client/src/components/FramedIcon.tsx b/packages/ui-client/src/components/FramedIcon.tsx
deleted file mode 100644
index 6fa2b230c661f..0000000000000
--- a/packages/ui-client/src/components/FramedIcon.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Box, Icon } from '@rocket.chat/fuselage';
-import type { Keys } from '@rocket.chat/icons';
-import type { FC } from 'react';
-
-type Variant = 'danger' | 'info' | 'success' | 'warning' | 'neutral';
-
-type ColorMapType = {
-	[key in Variant]: {
-		color: string;
-		bg: string;
-	};
-};
-
-const colorMap: ColorMapType = {
-	danger: { color: 'status-font-on-danger', bg: 'status-background-danger' },
-	info: { color: 'status-font-on-info', bg: 'status-background-info' },
-	success: { color: 'status-font-on-success', bg: 'status-background-success' },
-	warning: { color: 'status-font-on-warning', bg: 'status-background-warning' },
-	neutral: { color: 'font-secondary-info', bg: 'surface-tint' },
-};
-
-const getColors = (type: Variant) => colorMap[type] || colorMap.neutral;
-
-type FramedIconProps = {
-	type: Variant;
-	icon: Keys;
-};
-
-export const FramedIcon: FC<FramedIconProps> = ({ type, icon }) => {
-	const { color, bg } = getColors(type);
-
-	return (
-		<Box is='span' color={color} fontScale='p2m'>
-			<Icon name={icon} size={20} bg={bg} p={4} borderRadius={4} />
-		</Box>
-	);
-};
diff --git a/packages/ui-client/src/components/index.ts b/packages/ui-client/src/components/index.ts
index f7f77474b2563..f5f37ac1c8784 100644
--- a/packages/ui-client/src/components/index.ts
+++ b/packages/ui-client/src/components/index.ts
@@ -10,4 +10,3 @@ export * as UserStatus from './UserStatus';
 export * from './Header';
 export * from './MultiSelectCustom/MultiSelectCustom';
 export * from './FeaturePreview/FeaturePreview';
-export * from './FramedIcon';