diff --git a/ui/app/components/ui/check-box/check-box.component.js b/ui/app/components/ui/check-box/check-box.component.js
index 8dcd6ea36..5d062e0e8 100644
--- a/ui/app/components/ui/check-box/check-box.component.js
+++ b/ui/app/components/ui/check-box/check-box.component.js
@@ -26,8 +26,8 @@ const CheckBox = ({ className, disabled, id, onClick, checked }) => {
       checked={checked === CHECKBOX_STATE.CHECKED}
       className={classnames('check-box', className, {
         'far fa-square': checked === CHECKBOX_STATE.UNCHECKED,
-        'fa fa-check-square': checked === CHECKBOX_STATE.CHECKED,
-        'fa fa-minus-square': checked === CHECKBOX_STATE.INDETERMINATE,
+        'fa fa-check-square check-box__checked': checked === CHECKBOX_STATE.CHECKED,
+        'fa fa-minus-square check-box__indeterminate': checked === CHECKBOX_STATE.INDETERMINATE,
       })}
       disabled={disabled}
       id={id}
diff --git a/ui/app/components/ui/check-box/index.scss b/ui/app/components/ui/check-box/index.scss
index bf7d9762b..40273973d 100644
--- a/ui/app/components/ui/check-box/index.scss
+++ b/ui/app/components/ui/check-box/index.scss
@@ -10,7 +10,7 @@
   border-radius: 2px;
   display: flex;
 
-  &:checked, &:indeterminate {
+  &__checked, &__indeterminate {
     color: $curious-blue;
     border-color: $curious-blue;
   }