diff --git a/frontend/src/assets/icons/projectIconSmall.svg b/frontend/src/assets/icons/projectIconSmall.svg
index 7e6546eedb..e90fd8c788 100644
--- a/frontend/src/assets/icons/projectIconSmall.svg
+++ b/frontend/src/assets/icons/projectIconSmall.svg
@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" focusable='false' aria-hidden='true' width="37" height="35" viewBox="0 0 37 35" fill="none">
-    <rect x="8.9864" y="9.93245" width="3.78378" height="13.2432" rx="1.41892" stroke-width="0.945947" />
-    <rect x="16.5542" y="13.7161" width="3.78378" height="9.45946" rx="1.41892" stroke-width="0.945947" />
-    <rect x="24.1217" y="18.4456" width="3.78378" height="4.72973" rx="1.41892" stroke-width="0.945947" />
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.9054" y="0.527119" width="2.48649" height="8.7027" rx="0.932432" stroke-width="0.621622"/>
+<rect x="5.87838" y="3.01345" width="2.48649" height="6.21622" rx="0.932432" stroke-width="0.621622"/>
+<rect x="10.8513" y="6.12185" width="2.48649" height="3.10811" rx="0.932432" stroke-width="0.621622"/>
 </svg>
diff --git a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
index 12bf94cab5..cc0d39e589 100644
--- a/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
+++ b/frontend/src/component/commandBar/RecentlyVisited/CommandResultGroup.tsx
@@ -10,16 +10,14 @@ import {
 import { Link } from 'react-router-dom';
 import type { Theme } from '@mui/material/styles/createTheme';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import {
-    IconRenderer,
-    StyledProjectIcon,
-} from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
+import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/IconRenderer';
 import InsightsIcon from '@mui/icons-material/Insights';
 import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
 import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { Children } from 'react';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 export const listItemButtonStyle = (theme: Theme) => ({
     border: `1px solid transparent`,
@@ -56,7 +54,7 @@ const ButtonItemIcon = ({
     path: string;
 }) => {
     if (path === '/projects') {
-        return <StyledProjectIcon />;
+        return <ProjectIcon />;
     }
     if (path === '/playground') {
         return <PlaygroundIcon />;
@@ -149,7 +147,7 @@ export const RecentlyVisitedProjectButton = ({
             onClick={onItemClick}
         >
             <StyledListItemIcon>
-                <StyledProjectIcon />
+                <ProjectIcon />
             </StyledListItemIcon>
             <StyledListItemText>
                 <StyledButtonTypography color='textPrimary'>
@@ -263,7 +261,7 @@ export const CommandResultGroup = ({
                         <StyledListItemIcon>
                             <ConditionallyRender
                                 condition={groupName === 'Projects'}
-                                show={<StyledProjectIcon />}
+                                show={<ProjectIcon />}
                                 elseShow={<Icon>{icon}</Icon>}
                             />
                         </StyledListItemIcon>
diff --git a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
index 4b80f10485..80b052ef6c 100644
--- a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.styles.tsx
@@ -23,11 +23,9 @@ export const TopGrid = styled(StyledFormSection)(({ theme }) => ({
     gap: theme.spacing(4),
 }));
 
-export const styleIcon = (Icon: React.ComponentType) =>
-    styled(Icon)(({ theme }) => ({
-        fill: theme.palette.primary.main,
-        stroke: theme.palette.primary.main,
-    }));
+export const IconWrapper = styled('span')(({ theme }) => ({
+    color: theme.palette.primary.main,
+}));
 
 export const StyledHeader = styled(Typography)({
     gridArea: 'header',
diff --git a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
index 8b0bbed770..266612d329 100644
--- a/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
+++ b/frontend/src/component/common/DialogFormTemplate/DialogFormTemplate.tsx
@@ -10,7 +10,7 @@ import {
     TopGrid,
     LimitContainer,
     FormActions,
-    styleIcon,
+    IconWrapper,
 } from './DialogFormTemplate.styles';
 import { Button } from '@mui/material';
 import { CreateButton } from 'component/common/CreateButton/CreateButton';
@@ -21,7 +21,7 @@ type FormProps = {
     description: string;
     errors: { [key: string]: string };
     handleSubmit: FormEventHandler<HTMLFormElement>;
-    icon: React.ComponentType;
+    Icon: React.ReactNode;
     Limit?: React.ReactNode;
     name: string;
     onClose: () => void;
@@ -40,19 +40,17 @@ export const DialogFormTemplate: React.FC<FormProps> = ({
     description,
     setDescription,
     errors,
-    icon,
+    Icon,
     resource,
     onClose,
     configButtons,
     createButtonProps,
     validateName = () => {},
 }) => {
-    const StyledIcon = styleIcon(icon);
-
     return (
         <StyledForm onSubmit={handleSubmit}>
             <TopGrid>
-                <StyledIcon aria-hidden='true' />
+                <IconWrapper>{Icon}</IconWrapper>
                 <StyledHeader variant='h2'>Create {resource}</StyledHeader>
                 <ProjectNameContainer>
                     <StyledInput
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index 0e8cdec026..dcb9ec6ce3 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -185,7 +185,6 @@ const StyledSidebar = styled('aside', {
         width: sidebarWidth || formTemplateSidebarWidth,
         [theme.breakpoints.down(1100)]: {
             width: '100%',
-            color: 'red',
         },
         [theme.breakpoints.down(500)]: {
             padding: theme.spacing(4, 2),
@@ -434,14 +433,11 @@ const GuidanceContent: React.FC<
     showLink = true,
     fixedDocumentationHeight,
 }) => {
-    const StyledDocumentationIconWrapper = styled('div')(({ theme }) => ({
+    const StyledDocumentationIconWrapper = styled('div')({
         height: '2rem',
         display: 'grid',
         placeItems: 'center',
-        svg: {
-            width: '100%',
-        },
-    }));
+    });
 
     const StyledDocumentationWrapper = styled('div')({
         height: fixedDocumentationHeight,
diff --git a/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx b/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx
new file mode 100644
index 0000000000..3bde699536
--- /dev/null
+++ b/frontend/src/component/common/ProjectIcon/ProjectIcon.tsx
@@ -0,0 +1,6 @@
+import { SvgIcon } from '@mui/material';
+import { ReactComponent as Svg } from 'assets/icons/projectIconSmall.svg';
+
+export const ProjectIcon = () => (
+    <SvgIcon component={Svg} viewBox={'0 0 14 10'} />
+);
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx
index d4a0a706d8..d50dad6bb4 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx
@@ -27,9 +27,7 @@ import BillingIcon from '@mui/icons-material/CreditCardOutlined';
 import EventLogIcon from '@mui/icons-material/EventNoteOutlined';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 import type { FC } from 'react';
-import { styled } from '@mui/material';
 
 // TODO: move to routes
 const icons: Record<string, typeof SvgIcon> = {
@@ -71,12 +69,3 @@ export const IconRenderer: FC<{ path: string }> = ({ path }) => {
 
     return <IconComponent />;
 };
-
-export const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
-    fill: theme.palette.neutral.main,
-    stroke: theme.palette.neutral.main,
-    // same as built-in icons
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-    fontSize: theme.spacing(3),
-}));
diff --git a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
index f07da49f20..69a767fd6a 100644
--- a/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
+++ b/frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx
@@ -9,7 +9,7 @@ import {
     SignOutItem,
 } from './ListItems';
 import { Box, List, styled, Tooltip, Typography } from '@mui/material';
-import { IconRenderer, StyledProjectIcon } from './IconRenderer';
+import { IconRenderer } from './IconRenderer';
 import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import SearchIcon from '@mui/icons-material/Search';
@@ -23,6 +23,7 @@ import FlagIcon from '@mui/icons-material/OutlinedFlag';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 const StyledBadgeContainer = styled('div')(({ theme }) => ({
     paddingLeft: theme.spacing(2),
@@ -119,7 +120,7 @@ export const RecentProjectsList: FC<{
                 onClick={onClick}
                 selected={false}
             >
-                <StyledProjectIcon />
+                <ProjectIcon />
             </DynamicListItem>
         </List>
     );
@@ -166,7 +167,7 @@ export const PrimaryNavigationList: FC<{
                 onClick={() => onClick('/projects')}
                 selected={activeItem === '/projects'}
             >
-                <StyledProjectIcon />
+                <ProjectIcon />
             </DynamicListItem>
             <DynamicListItem
                 href='/search'
diff --git a/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts b/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts
index cb81c2688f..6e9e7e970e 100644
--- a/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts
+++ b/frontend/src/component/project/NewProjectCard/NewProjectCard.styles.ts
@@ -3,7 +3,6 @@ import { Card, Box } from '@mui/material';
 import Delete from '@mui/icons-material/Delete';
 import Edit from '@mui/icons-material/Edit';
 import { flexRow } from 'themes/themeStyles';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 
 export const StyledProjectCard = styled(Card)(({ theme }) => ({
     display: 'flex',
@@ -79,15 +78,12 @@ export const StyledParagraphInfo = styled('p')(({ theme }) => ({
     fontSize: theme.typography.body1.fontSize,
 }));
 
-export const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
-    fill: theme.palette.primary.main,
-    stroke: theme.palette.primary.main,
-}));
-
 export const StyledIconBox = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    padding: theme.spacing(1, 0.5, 0.5, 0),
+    display: 'grid',
+    placeItems: 'center',
+    padding: theme.spacing(0, 0.5, 0, 1),
     marginRight: theme.spacing(2),
     alignSelf: 'baseline',
+    color: theme.palette.primary.main,
+    height: '100%',
 }));
diff --git a/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx b/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
index 59bb6be9ec..23198c0502 100644
--- a/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
+++ b/frontend/src/component/project/NewProjectCard/NewProjectCard.tsx
@@ -9,12 +9,12 @@ import {
     StyledParagraphInfo,
     StyledProjectCardBody,
     StyledIconBox,
-    StyledProjectIcon,
 } from './NewProjectCard.styles';
 import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter';
 import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge';
 import { ProjectOwners } from './ProjectOwners/ProjectOwners';
 import type { ProjectSchemaOwners } from 'openapi';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 interface IProjectCardProps {
     name: string;
@@ -43,7 +43,7 @@ export const ProjectCard = ({
         <StyledProjectCardBody>
             <StyledDivHeader>
                 <StyledIconBox>
-                    <StyledProjectIcon />
+                    <ProjectIcon />
                 </StyledIconBox>
                 <StyledBox data-loading>
                     <StyledCardTitle>{name}</StyledCardTitle>
diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
index aa2dc4e748..49751e7586 100644
--- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
+++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx
@@ -16,7 +16,6 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';
 import { Dialog, styled } from '@mui/material';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 import { useUiFlag } from 'hooks/useUiFlag';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { Limit } from 'component/common/Limit/Limit';
@@ -28,6 +27,7 @@ import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironmen
 import { useStickinessOptions } from 'hooks/useStickinessOptions';
 import { ChangeRequestTableConfigButton } from './ConfigButtons/ChangeRequestTableConfigButton';
 import { StyledDefinitionList } from './CreateProjectDialog.styles';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 interface ICreateProjectDialogProps {
     open: boolean;
@@ -47,11 +47,6 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
     },
 }));
 
-const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
-    fill: theme.palette.common.white,
-    stroke: theme.palette.common.white,
-}));
-
 const projectModeOptions = [
     { value: 'open', label: 'open' },
     { value: 'protected', label: 'protected' },
@@ -151,8 +146,8 @@ export const CreateProjectDialog = ({
         text: string;
         link?: { url: string; label: string };
     } = {
-        icon: <StyledProjectIcon />,
-        text: 'Projects allows you to group feature flags together in the management UI.',
+        icon: <ProjectIcon />,
+        text: 'Projects allow you to group feature flags together in the management UI.',
         link: {
             url: 'https://docs.getunleash.io/reference/projects',
             label: 'Projects documentation',
@@ -273,7 +268,7 @@ export const CreateProjectDialog = ({
                     description={projectDesc}
                     setDescription={setProjectDesc}
                     errors={errors}
-                    icon={StyledProjectIcon}
+                    Icon={<ProjectIcon />}
                     onClose={onClose}
                     validateName={validateName}
                     configButtons={
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
index be7bc7c730..f032198490 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
@@ -12,7 +12,6 @@ import {
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';
 import { Dialog, styled } from '@mui/material';
-import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
 import { useUiFlag } from 'hooks/useUiFlag';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { Limit } from 'component/common/Limit/Limit';
@@ -32,6 +31,7 @@ import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
 import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
 import { DialogFormTemplate } from 'component/common/DialogFormTemplate/DialogFormTemplate';
 import { SingleSelectConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 
 interface ICreateFeatureDialogProps {
     open: boolean;
@@ -54,7 +54,7 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
 const configButtonData = {
     project: {
         icon: <ProjectIcon />,
-        text: 'Projects allows you to group feature flags together in the management UI.',
+        text: 'Projects allow you to group feature flags together in the management UI.',
     },
     type: {
         icon: <FlagIcon />,
@@ -205,7 +205,7 @@ export const CreateFeatureDialog = ({
                     description={description}
                     errors={errors}
                     handleSubmit={handleSubmit}
-                    icon={FlagIcon}
+                    Icon={<FlagIcon />}
                     validateName={validateToggleName}
                     Limit={
                         <ConditionallyRender
diff --git a/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx b/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx
index b76f50dd13..38f067337b 100644
--- a/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/Settings/EditProject/UpdateProject.tsx
@@ -111,7 +111,7 @@ export const UpdateProject = ({ project }: IUpdateProject) => {
             <FormTemplate
                 loading={loading}
                 title='General settings'
-                description='Projects allows you to group feature flags together in the management UI.'
+                description='Projects allow you to group feature flags together in the management UI.'
                 documentationLink='https://docs.getunleash.io/reference/projects'
                 documentationLinkLabel='Projects documentation'
                 formatApiCode={formatProjectApiCode}