diff --git a/packages/manager/src/assets/icons/visibilityHide.svg b/packages/manager/src/assets/icons/visibilityHide.svg
new file mode 100644
index 00000000000..4fd7e5572df
--- /dev/null
+++ b/packages/manager/src/assets/icons/visibilityHide.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 11C10.0676 11.7058 9.17224 11.981 8 12C4.18182 12 2 8 2 8C2.67849 6.74436 3.5262 5.86484 4.66667 5.00001M6.84259 4.13001C7.21805 4.04274 7.60245 3.99911 7.98805 4.00001C11.8062 4.00001 14 8 14 8C13.6689 8.61512 13.3809 8.94659 12.9287 9.48028M8.74171 9.33985C8.54098 9.42867 8.3243 9.47643 8.10458 9.48028C7.88487 9.48413 7.66662 9.44399 7.46287 9.36226C7.25911 9.28053 7.07402 9.15889 6.91863 9.00458C6.76325 8.85027 6.64075 8.66647 6.55845 8.46412C6.47615 8.26178 6.43573 8.04505 6.43961 7.82687C6.44348 7.60868 6.49158 7.3935 6.58101 7.19417" stroke="#3D3D42" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 2L14 14" stroke="#3D3D42" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/manager/src/assets/icons/visibilityShow.svg b/packages/manager/src/assets/icons/visibilityShow.svg
new file mode 100644
index 00000000000..858614cc421
--- /dev/null
+++ b/packages/manager/src/assets/icons/visibilityShow.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 8C2 8 4.18182 4 8 4C11.8182 4 14 8 14 8C14 8 11.8182 12 8 12C4.18182 12 2 8 2 8Z" stroke="#3D3D42" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00002 9.33341C8.7364 9.33341 9.33335 8.73646 9.33335 8.00008C9.33335 7.2637 8.7364 6.66675 8.00002 6.66675C7.26364 6.66675 6.66669 7.2637 6.66669 8.00008C6.66669 8.73646 7.26364 9.33341 8.00002 9.33341Z" stroke="#3D3D42" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx
index a0b52bcb08c..85ceac51845 100644
--- a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx
+++ b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx
@@ -182,7 +182,9 @@ export const ContactInformation = React.memo((props: Props) => {
                 }
                 sx={(theme) => ({
                   '& svg': {
-                    color: theme.palette.primary.main,
+                    '& path': {
+                      stroke: theme.palette.primary.main,
+                    },
                   },
                   marginRight: 2,
                 })}
diff --git a/packages/ui/src/components/VisibilityTooltip/VisibilityTooltip.tsx b/packages/ui/src/components/VisibilityTooltip/VisibilityTooltip.tsx
index 2072b5c44aa..e2ef31946c2 100644
--- a/packages/ui/src/components/VisibilityTooltip/VisibilityTooltip.tsx
+++ b/packages/ui/src/components/VisibilityTooltip/VisibilityTooltip.tsx
@@ -1,5 +1,6 @@
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityShowIcon from 'src/assets/icons/visibilityShow.svg';
+import VisibilityHideIcon from 'src/assets/icons/visibilityHide.svg';
+
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
@@ -44,9 +45,9 @@ export const VisibilityTooltip = (props: Props) => {
     >
       <StyledToggleButton onClick={handleClick}>
         {!isVisible ? (
-          <VisibilityIcon aria-label="Show" />
+          <VisibilityShowIcon aria-label="Show" />
         ) : (
-          <VisibilityOffIcon aria-label="Hide" />
+          <VisibilityHideIcon aria-label="Hide" />
         )}
         {label}
       </StyledToggleButton>
@@ -58,13 +59,15 @@ const StyledToggleButton = styled(IconButton, {
   label: 'StyledToggleButton',
 })(({ theme }) => ({
   '& svg': {
-    color: theme.palette.grey[500],
-    fontSize: '0.875rem',
+    '& path': {
+      stroke: theme.palette.grey[500],
+    },
   },
   '& svg:hover': {
-    color: theme.palette.primary.main,
+    '& path': {
+      stroke: theme.palette.primary.main,
+    },
   },
-  fontSize: '0.875rem',
   marginLeft: theme.spacing(),
   minHeight: 'auto',
   minWidth: 'auto',