diff --git a/README.md b/README.md
index f3d7134a8..340e58034 100644
--- a/README.md
+++ b/README.md
@@ -509,3 +509,5 @@ e.g.:
     }
 }
 ```
+
+>**NOTE** - all SVGs require explicit `width` and `height` in the Safari browser in order to be rendered properly, otherwise they'll be rendered to the _default_ size and probably will crop out of view
diff --git a/src-ts/lib/styles/mixins/_icons.mixins.scss b/src-ts/lib/styles/mixins/_icons.mixins.scss
index 30080f592..bebd7d98d 100644
--- a/src-ts/lib/styles/mixins/_icons.mixins.scss
+++ b/src-ts/lib/styles/mixins/_icons.mixins.scss
@@ -40,6 +40,11 @@
     width: $space-mxx;
 }
 
+@mixin icon-full {
+    height: 100%;
+    width: 100%;
+}
+
 @mixin icon-size($size) {
     height: $size * 1px;
     width: $size * 1px;
diff --git a/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss b/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss
index e22b9512b..72f6bc564 100755
--- a/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss
+++ b/src-ts/tools/learn/learn-lib/course-outline/status-icon/StatusIcon.module.scss
@@ -3,4 +3,7 @@
 .checkmark {
     @include icon-size(26);
     flex: 0 0 auto;
-}
\ No newline at end of file
+    svg {
+        @include icon-full;
+    }
+}
diff --git a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss
index 1b331837e..98272f548 100755
--- a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss
+++ b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.module.scss
@@ -6,6 +6,7 @@
     color: $black-20;
 
     .icon {
+
         @include icon-xl;
         border-radius: 50%;
         flex: 0 0 auto;
@@ -21,6 +22,7 @@
         background: $black-40;
 
         > svg {
+            @include icon-full;
             margin: -1 * $border;
         }
     }
@@ -43,4 +45,4 @@
             background: $tc-white;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx
index 78c8ac9b8..b5fd8b2a5 100755
--- a/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx
+++ b/src-ts/tools/learn/learn-lib/course-outline/step-icon/StepIcon.tsx
@@ -24,7 +24,7 @@ const StepIcon: FC<StepIconProps> = (props: StepIconProps) => {
         return (
             <>
                 {props.label && props.completed && (
-                    <IconSolid.CheckCircleIcon />
+                    <IconSolid.CheckCircleIcon viewBox='2 2 16 16' />
                 )}
 
                 {!props.label && (