diff --git a/changes/issue-11763-fix-misaligned-icons b/changes/issue-11763-fix-misaligned-icons
new file mode 100644
index 0000000000..c3df3d250d
--- /dev/null
+++ b/changes/issue-11763-fix-misaligned-icons
@@ -0,0 +1 @@
+- fix misaligned icons in UI
diff --git a/frontend/components/Icon/_styles.scss b/frontend/components/Icon/_styles.scss
index 03f557f68d..13c4c4a4cf 100644
--- a/frontend/components/Icon/_styles.scss
+++ b/frontend/components/Icon/_styles.scss
@@ -2,8 +2,4 @@
   // keeps this element the same size as the svg
   // aligns properly in text, buttons, dropdowns, summary tile custom component
   display: inline-flex;
-
-  svg {
-    padding: 1px;
-  }
 }
diff --git a/frontend/components/icons/PendingPartial.tsx b/frontend/components/icons/PendingPartial.tsx
index 6443c9b4b8..61420d1fe4 100644
--- a/frontend/components/icons/PendingPartial.tsx
+++ b/frontend/components/icons/PendingPartial.tsx
@@ -1,18 +1,18 @@
 import React from "react";
 
-const PendingPartial = () => {
+import { COLORS, Colors } from "styles/var/colors";
+
+interface ICheckProps {
+  color?: Colors;
+}
+
+const PendingPartial = ({ color = "ui-fleet-black-50" }: ICheckProps) => {
   return (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="9" cy="9" r="8" stroke="#8B8FA2" strokeWidth="2" />
-      <circle cx="5.6665" cy="9" r="1" fill="#8B8FA2" />
-      <circle cx="8.6665" cy="9" r="1" fill="#8B8FA2" />
-      <circle cx="11.6665" cy="9" r="1" fill="#8B8FA2" />
+    <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="8" cy="8" r="7" stroke={COLORS[color]} strokeWidth="2" />
+      <circle cx="4.667" cy="8" r="1" fill={COLORS[color]} />
+      <circle cx="7.667" cy="8" r="1" fill={COLORS[color]} />
+      <circle cx="10.666" cy="8" r="1" fill={COLORS[color]} />
     </svg>
   );
 };
diff --git a/frontend/components/icons/SuccessPartial.tsx b/frontend/components/icons/SuccessPartial.tsx
index 9f3841c759..ee2e0072dd 100644
--- a/frontend/components/icons/SuccessPartial.tsx
+++ b/frontend/components/icons/SuccessPartial.tsx
@@ -1,18 +1,17 @@
 import React from "react";
+import { COLORS, Colors } from "styles/var/colors";
 
-const SuccessPartial = () => {
+interface ICheckProps {
+  color?: Colors;
+}
+
+const SuccessPartial = ({ color = "status-success" }: ICheckProps) => {
   return (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <ellipse cx="9" cy="9" rx="8" ry="8" stroke="#3DB67B" strokeWidth="2" />
+    <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="8" cy="8" r="7" stroke={COLORS[color]} strokeWidth="2" />
       <path
-        d="M6 10L8 12L12 6"
-        stroke="#3DB67B"
+        d="m5 9 2 2 4-6"
+        stroke={COLORS[color]}
         strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index b4afbe9d20..7057647eea 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -18,8 +18,6 @@ body {
 html,
 body {
   height: 100%;
-  // desired default line-height for text is 1.5x the font size.
-  line-height: 1.5;
 
   .__react_component_tooltip {
     text-align: center;
@@ -39,6 +37,13 @@ h3 {
   line-height: 1.2;
 }
 
+p {
+  // Desired default line-height for text is 1.5x the font size for paragrah text.
+  // This allows for a comfortable reading experience by adding space between
+  // multiline paragraphs.
+  line-height: 1.5;
+}
+
 h1 {
   font-size: $large;
   font-weight: $regular;