diff --git a/public/icons/arrow.svg b/public/icons/arrow.svg
deleted file mode 100644
index b4a58716..00000000
--- a/public/icons/arrow.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Arrow">
-<path id="Vector 31" d="M5 8H15M15 8L11 4M15 8L11 12" stroke="#006590" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-</svg>
diff --git a/public/icons/dot.svg b/public/icons/dot.svg
deleted file mode 100644
index 22d7ab0b..00000000
--- a/public/icons/dot.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle id="Dot" cx="2" cy="2" r="2" fill="#006590"/>
-</svg>
diff --git a/src/views/blog-post/table-of-contents/table-of-contents.module.scss b/src/views/blog-post/table-of-contents/table-of-contents.module.scss
index 35717f40..c678f80a 100644
--- a/src/views/blog-post/table-of-contents/table-of-contents.module.scss
+++ b/src/views/blog-post/table-of-contents/table-of-contents.module.scss
@@ -16,7 +16,7 @@
 
 	--toc_sub-item_padding-start: var(--spc-3x);
 	--toc_sub-item_dot_margin-end: var(--spc-3x);
-	--toc_sub-item_dot_size: 16px;
+	--toc_sub-item_dot_size: 1rem;
 
 	--toc_label_color: var(--foreground_emphasis-medium);
 	--toc_label_color_selected: var(--foreground_emphasis-high);
@@ -27,7 +27,6 @@
 	--toc_item_background-color_focused: var(--background_focus);
 
 	--toc_subheading-dot_color: var(--primary_default);
-	--toc_subheading-dot_color_focused: var(--foreground_emphasis-high);
 
 	--toc_focus-outline_color: var(--focus-outline_primary);
 	--toc_focus-outline_width: var(--border-width_focus);
@@ -166,7 +165,16 @@
 /* Arrow */
 .depth2:global(.toc-is-active):not(:hover) > a > *::before {
 	content: " ";
-	background-image: url("/icons/arrow.svg");
+	/* Mask applied to use the background color on */
+	background-color: var(--toc_subheading-dot_color);
+	-webkit-mask: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Arrow"><path id="Vector 31" d="M5 8H15M15 8L11 4M15 8L11 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
+	mask: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Arrow"><path id="Vector 31" d="M5 8H15M15 8L11 4M15 8L11 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
+	-webkit-mask-position: center;
+	mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: var(--toc_sub-item_dot_size);
+	mask-size: var(--toc_sub-item_dot_size);
 	background-repeat: no-repeat;
 	background-position: center center;
 	height: 100%;
@@ -179,7 +187,16 @@
 /* Dot */
 .depth2:hover > a > *::before {
 	content: " ";
-	background-image: url("/icons/dot.svg");
+	/* Mask applied to use the background color on */
+	background-color: var(--toc_subheading-dot_color);
+	-webkit-mask: url('data:image/svg+xml;utf8,<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"><circle id="Dot" cx="2" cy="2" r="2" fill="black"/></svg>');
+	mask: url('data:image/svg+xml;utf8,<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg"><circle id="Dot" cx="2" cy="2" r="2" fill="black"/></svg>');
+	-webkit-mask-position: center;
+	mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-size: 0.25rem;
+	mask-size: 0.25rem;
 	background-repeat: no-repeat;
 	background-position: center center;
 	height: 100%;