diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx
index c3642dff..ec9cf247 100644
--- a/src/forgot-password/ForgotPasswordPage.jsx
+++ b/src/forgot-password/ForgotPasswordPage.jsx
@@ -12,6 +12,8 @@ import {
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { Formik } from 'formik';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import messages from './messages';
 import { forgotPassword } from './data/actions';
 import { forgotPasswordResultSelector } from './data/selectors';
@@ -105,6 +107,7 @@ const ForgotPasswordPage = (props) => {
                     default: intl.formatMessage(messages['forgot.password.page.submit.button']),
                   }}
                   onClick={handleSubmit}
+                  icons={{ pending: <FontAwesomeIcon icon={faSpinner} spin /> }}
                 />
               </Form>
             </div>
diff --git a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
index 61779bf2..8feef6d5 100644
--- a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
+++ b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
@@ -332,11 +332,23 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
           <span
             className="pgn__stateful-btn-icon"
           >
-            <span
-              aria-hidden={true}
-              className="icon fa fa-spinner fa-spin"
-              id="Icon1"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-spinner fa-w-16 fa-spin "
+              data-icon="spinner"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
           </span>
           Recover my password
         </span>
diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx
index 75119ddf..2c4af315 100644
--- a/src/login/LoginPage.jsx
+++ b/src/login/LoginPage.jsx
@@ -9,6 +9,8 @@ import {
 } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 import AccountActivationMessage from './AccountActivationMessage';
 import ConfirmationAlert from '../common-components/ConfirmationAlert';
@@ -251,6 +253,7 @@ class LoginPage extends React.Component {
                   labels={{
                     default: intl.formatMessage(messages['sign.in.button']),
                   }}
+                  icons={{ pending: <FontAwesomeIcon icon={faSpinner} spin /> }}
                   onClick={this.handleSubmit}
                 />
               </Form>
diff --git a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
index f9ce811d..bb1ef81e 100644
--- a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
@@ -716,11 +716,23 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
             <span
               className="pgn__stateful-btn-icon"
             >
-              <span
-                aria-hidden={true}
-                className="icon fa fa-spinner fa-spin"
-                id="Icon1"
-              />
+              <svg
+                aria-hidden="true"
+                className="svg-inline--fa fa-spinner fa-w-16 fa-spin "
+                data-icon="spinner"
+                data-prefix="fas"
+                focusable="false"
+                role="img"
+                style={Object {}}
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"
+                  fill="currentColor"
+                  style={Object {}}
+                />
+              </svg>
             </span>
             Sign in
           </span>