diff --git a/packages/app-rfi/src/components/AsuRfi/index.css b/packages/app-rfi/src/components/AsuRfi/index.css
index 0972b48289..51008967a6 100644
--- a/packages/app-rfi/src/components/AsuRfi/index.css
+++ b/packages/app-rfi/src/components/AsuRfi/index.css
@@ -83,8 +83,10 @@ form.uds-form.uds-rfi .rfi-input-select input:focus {
 }
 
 /* For instances where FontAwesome SVG conversion doesn't happen, we need to
-   provide rules for i tags */
-form.uds-form.uds-rfi label i.uds-field-required {
+  provide rules for i tags, keeping "label" and "i" incase the weight of the
+  style is the same strength */
+form.uds-form.uds-rfi label i.uds-field-required,
+form.uds-form.uds-rfi .uds-field-required {
   font-size: 0.5rem;
   margin-right: 0.25rem;
   margin-bottom: 0.125rem;
diff --git a/packages/app-rfi/src/components/appVariants/index.js b/packages/app-rfi/src/components/appVariants/index.js
index 081c276916..32ffae1e85 100644
--- a/packages/app-rfi/src/components/appVariants/index.js
+++ b/packages/app-rfi/src/components/appVariants/index.js
@@ -16,6 +16,7 @@ import {
   ZipCode,
   validation,
 } from "../steps/questions";
+import { RfiRequiredIndicator } from "../controls/controls-helpers";
 
 const Step = ({ children }) => children;
 
@@ -52,11 +53,7 @@ const variants = {
         then check your email.
       </p>
       <p>
-        <i
-          title="Required"
-          className="fa fa-icon fa-circle uds-field-required"
-          aria-hidden="true"
-        />
+        <RfiRequiredIndicator required={true} />
         Indicates required field
       </p>
       <br />
@@ -93,11 +90,7 @@ const variants = {
         then check your email.
       </p>
       <p>
-        <i
-          title="Required"
-          className="fa fa-icon fa-circle uds-field-required"
-          aria-hidden="true"
-        />
+        <RfiRequiredIndicator required={true} />
         Indicates required field
       </p>
       <br />
diff --git a/packages/app-rfi/src/components/controls/controls-helpers.js b/packages/app-rfi/src/components/controls/controls-helpers.js
index 60f8e18060..1a6510eeb6 100644
--- a/packages/app-rfi/src/components/controls/controls-helpers.js
+++ b/packages/app-rfi/src/components/controls/controls-helpers.js
@@ -15,30 +15,26 @@ const GaEventPropTypes = {
   text: PropTypes.string,
 };
 
+const RfiRequiredIndicator = ({ required = false }) =>
+  required && (
+    <>
+      <span title="Required">
+        <i className="fas fa-circle uds-field-required" aria-hidden="true" />
+      </span>
+      &nbsp;
+    </>
+  );
+
 const RfiLabel = ({ label, name, id = undefined, requiredIcon = undefined }) => (
   <label htmlFor={id || name}>
-    {requiredIcon && (
-      <>
-        <span title="Required">
-          <i className="fas fa-circle uds-field-required" aria-hidden="true" />
-        </span>
-        &nbsp;
-      </>
-    )}
+    <RfiRequiredIndicator required={requiredIcon} />
     {label}
   </label>
 );
 
 const RfiLegend = ({ label = undefined, requiredIcon = undefined }) => (
   <legend className="fw-bold">
-    {requiredIcon && (
-      <>
-        <span title="Required">
-          <i className="fas fa-circle uds-field-required" aria-hidden="true" />
-        </span>
-        &nbsp;
-      </>
-    )}
+    <RfiRequiredIndicator required={requiredIcon} />
     {label}
   </legend>
 );
@@ -59,6 +55,10 @@ const RfiError = ({ isError = undefined, metaError = undefined }) => (
 // duplicate the setting in our props got displaying the required icon until
 // Formik has a better way to do it.
 
+RfiRequiredIndicator.propTypes = {
+  required: PropTypes.bool,
+};
+
 RfiLabel.propTypes = {
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
@@ -75,4 +75,4 @@ RfiError.propTypes = {
   isError: PropTypes.bool,
   metaError: PropTypes.string,
 };
-export { RfiLabel, RfiLegend, RfiError, GaEventPropTypes };
+export { RfiRequiredIndicator, RfiLabel, RfiLegend, RfiError, GaEventPropTypes };