diff --git a/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap b/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
index e4837e5b96..fb9724c662 100644
--- a/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
@@ -24,15 +24,10 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       <div
         className="modal-back"
       >
-        <LocalizedIcon
+        <i
           className="fa fa-angle-left"
           onClick={[MockFunction]}
-          title={
-            Object {
-              "defaultMessage": "Collapse Icon",
-              "id": "generic_icons.collapse",
-            }
-          }
+          title="Collapse Icon"
         />
       </div>
       <MemoizedFormattedMessage
@@ -137,14 +132,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       id="viewAccessHistory"
       modalId="access_history"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-clock-o"
-        title={
-          Object {
-            "defaultMessage": "Access History Icon",
-            "id": "user.settings.security.viewHistory.icon",
-          }
-        }
+        title="Access History Icon"
       />
       <MemoizedFormattedMessage
         defaultMessage="View Access History"
@@ -164,14 +154,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       id="viewAndLogOutOfActiveSessions"
       modalId="activity_log"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-clock-o"
-        title={
-          Object {
-            "defaultMessage": "Active Sessions Icon",
-            "id": "user.settings.security.logoutActiveSessions.icon",
-          }
-        }
+        title="Active Sessions Icon"
       />
       <MemoizedFormattedMessage
         defaultMessage="View and Log Out of Active Sessions"
@@ -206,15 +191,10 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       <div
         className="modal-back"
       >
-        <LocalizedIcon
+        <i
           className="fa fa-angle-left"
           onClick={[MockFunction]}
-          title={
-            Object {
-              "defaultMessage": "Collapse Icon",
-              "id": "generic_icons.collapse",
-            }
-          }
+          title="Collapse Icon"
         />
       </div>
       <MemoizedFormattedMessage
@@ -319,14 +299,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       id="viewAccessHistory"
       modalId="access_history"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-clock-o"
-        title={
-          Object {
-            "defaultMessage": "Access History Icon",
-            "id": "user.settings.security.viewHistory.icon",
-          }
-        }
+        title="Access History Icon"
       />
       <MemoizedFormattedMessage
         defaultMessage="View Access History"
@@ -346,14 +321,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       id="viewAndLogOutOfActiveSessions"
       modalId="activity_log"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-clock-o"
-        title={
-          Object {
-            "defaultMessage": "Active Sessions Icon",
-            "id": "user.settings.security.logoutActiveSessions.icon",
-          }
-        }
+        title="Active Sessions Icon"
       />
       <MemoizedFormattedMessage
         defaultMessage="View and Log Out of Active Sessions"
@@ -388,15 +358,10 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       <div
         className="modal-back"
       >
-        <LocalizedIcon
+        <i
           className="fa fa-angle-left"
           onClick={[MockFunction]}
-          title={
-            Object {
-              "defaultMessage": "Collapse Icon",
-              "id": "generic_icons.collapse",
-            }
-          }
+          title="Collapse Icon"
         />
       </div>
       <MemoizedFormattedMessage
@@ -501,14 +466,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       id="viewAccessHistory"
       modalId="access_history"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-clock-o"
-        title={
-          Object {
-            "defaultMessage": "Access History Icon",
-            "id": "user.settings.security.viewHistory.icon",
-          }
-        }
+        title="Access History Icon"
       />
       <MemoizedFormattedMessage
         defaultMessage="View Access History"
@@ -528,14 +488,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       id="viewAndLogOutOfActiveSessions"
       modalId="activity_log"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-clock-o"
-        title={
-          Object {
-            "defaultMessage": "Active Sessions Icon",
-            "id": "user.settings.security.logoutActiveSessions.icon",
-          }
-        }
+        title="Active Sessions Icon"
       />
       <MemoizedFormattedMessage
         defaultMessage="View and Log Out of Active Sessions"
@@ -570,15 +525,10 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       <div
         className="modal-back"
       >
-        <LocalizedIcon
+        <i
           className="fa fa-angle-left"
           onClick={[MockFunction]}
-          title={
-            Object {
-              "defaultMessage": "Collapse Icon",
-              "id": "generic_icons.collapse",
-            }
-          }
+          title="Collapse Icon"
         />
       </div>
       <MemoizedFormattedMessage
@@ -683,14 +633,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       id="viewAccessHistory"
       modalId="access_history"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-clock-o"
-        title={
-          Object {
-            "defaultMessage": "Access History Icon",
-            "id": "user.settings.security.viewHistory.icon",
-          }
-        }
+        title="Access History Icon"
       />
       <MemoizedFormattedMessage
         defaultMessage="View Access History"
@@ -710,14 +655,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
       id="viewAndLogOutOfActiveSessions"
       modalId="activity_log"
     >
-      <LocalizedIcon
+      <i
         className="fa fa-clock-o"
-        title={
-          Object {
-            "defaultMessage": "Active Sessions Icon",
-            "id": "user.settings.security.logoutActiveSessions.icon",
-          }
-        }
+        title="Active Sessions Icon"
       />
       <MemoizedFormattedMessage
         defaultMessage="View and Log Out of Active Sessions"
diff --git a/webapp/channels/src/components/user_settings/security/user_settings_security.test.tsx b/webapp/channels/src/components/user_settings/security/user_settings_security.test.tsx
index bba272ccd2..84c3963085 100644
--- a/webapp/channels/src/components/user_settings/security/user_settings_security.test.tsx
+++ b/webapp/channels/src/components/user_settings/security/user_settings_security.test.tsx
@@ -4,11 +4,13 @@
 import {shallow} from 'enzyme';
 import React from 'react';
 
+import type {OAuthApp} from '@mattermost/types/integrations';
 import type {UserProfile} from '@mattermost/types/users';
 
+import type {MockIntl} from 'tests/helpers/intl-test-helper';
 import type * as Utils from 'utils/utils';
 
-import UserSettingsSecurity from './user_settings_security';
+import {SecurityTab} from './user_settings_security';
 
 jest.mock('utils/utils', () => {
     const original = jest.requireActual('utils/utils');
@@ -45,40 +47,43 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
         experimentalEnableAuthenticationTransfer: true,
         passwordConfig: {} as ReturnType<typeof Utils.getPasswordConfig>,
         militaryTime: false,
+        intl: {
+            formatMessage: jest.fn(({id, defaultMessage}) => defaultMessage || id),
+        } as MockIntl,
     };
 
     test('should match snapshot, enable google', () => {
         const props = {...requiredProps, enableSaml: false};
 
-        const wrapper = shallow(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot, enable gitlab', () => {
         const props = {...requiredProps, enableSignUpWithGoogle: false, enableSaml: false, enableSignUpWithGitLab: true};
 
-        const wrapper = shallow(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot, enable office365', () => {
         const props = {...requiredProps, enableSignUpWithGoogle: false, enableSaml: false, enableSignUpWithOffice365: true};
 
-        const wrapper = shallow(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('should match snapshot, enable openID', () => {
         const props = {...requiredProps, enableSignUpWithGoogle: false, enableSaml: false, enableSignUpWithOpenId: true};
 
-        const wrapper = shallow(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
         expect(wrapper).toMatchSnapshot();
     });
 
     test('componentDidMount() should have called getAuthorizedOAuthApps', () => {
         const props = {...requiredProps, enableOAuthServiceProvider: true};
 
-        shallow(<UserSettingsSecurity {...props}/>);
+        shallow<SecurityTab>(<SecurityTab {...props}/>);
 
         expect(requiredProps.actions.getAuthorizedOAuthApps).toHaveBeenCalled();
     });
@@ -93,7 +98,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
             enableOAuthServiceProvider: true,
         };
 
-        const wrapper = shallow<UserSettingsSecurity>(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
 
         await promise;
 
@@ -110,7 +115,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
             enableOAuthServiceProvider: true,
         };
 
-        const wrapper = shallow<UserSettingsSecurity>(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
 
         await promise;
 
@@ -118,9 +123,9 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
     });
 
     test('submitPassword() should not have called updateUserPassword', async () => {
-        const wrapper = shallow(<UserSettingsSecurity {...requiredProps}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...requiredProps}/>);
 
-        await (wrapper.instance() as UserSettingsSecurity).submitPassword();
+        await wrapper.instance().submitPassword();
         expect(requiredProps.actions.updateUserPassword).toHaveBeenCalledTimes(0);
     });
 
@@ -130,7 +135,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
             ...requiredProps,
             actions: {...requiredProps.actions, updateUserPassword},
         };
-        const wrapper = shallow(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
 
         const password = 'psw';
         const state = {
@@ -140,7 +145,7 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
         };
         wrapper.setState(state);
 
-        await (wrapper.instance() as UserSettingsSecurity).submitPassword();
+        await wrapper.instance().submitPassword();
 
         expect(updateUserPassword).toHaveBeenCalled();
         expect(updateUserPassword).toHaveBeenCalledWith(
@@ -160,9 +165,9 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
             preventDefault: jest.fn(),
         };
 
-        const wrapper = shallow(<UserSettingsSecurity {...requiredProps}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...requiredProps}/>);
         wrapper.setState({authorizedApps: []});
-        (wrapper.instance() as UserSettingsSecurity).deauthorizeApp(event);
+        wrapper.instance().deauthorizeApp(event);
 
         expect(requiredProps.actions.deauthorizeOAuthApp).toHaveBeenCalled();
         expect(requiredProps.actions.deauthorizeOAuthApp).toHaveBeenCalledWith(
@@ -177,16 +182,16 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
             actions: {...requiredProps.actions, deauthorizeOAuthApp: () => promise},
         };
 
-        const wrapper: any = shallow(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
 
         const appId = 'appId';
-        const apps = [{id: appId}, {id: '2'}];
+        const apps = [{id: appId}, {id: '2'}] as OAuthApp[];
         const event: any = {
             currentTarget: {getAttribute: jest.fn().mockReturnValue(appId)},
             preventDefault: jest.fn(),
         };
         wrapper.setState({authorizedApps: apps});
-        (wrapper.instance() as UserSettingsSecurity).deauthorizeApp(event);
+        wrapper.instance().deauthorizeApp(event);
 
         await promise;
 
@@ -201,13 +206,13 @@ describe('components/user_settings/display/UserSettingsDisplay', () => {
             actions: {...requiredProps.actions, deauthorizeOAuthApp: () => promise},
         };
 
-        const wrapper: any = shallow(<UserSettingsSecurity {...props}/>);
+        const wrapper = shallow<SecurityTab>(<SecurityTab {...props}/>);
 
         const event: any = {
             currentTarget: {getAttribute: jest.fn().mockReturnValue('appId')},
             preventDefault: jest.fn(),
         };
-        (wrapper.instance() as UserSettingsSecurity).deauthorizeApp(event);
+        wrapper.instance().deauthorizeApp(event);
 
         await promise;
 
diff --git a/webapp/channels/src/components/user_settings/security/user_settings_security.tsx b/webapp/channels/src/components/user_settings/security/user_settings_security.tsx
index a1e1d76ebb..bab05c9017 100644
--- a/webapp/channels/src/components/user_settings/security/user_settings_security.tsx
+++ b/webapp/channels/src/components/user_settings/security/user_settings_security.tsx
@@ -4,7 +4,8 @@
 /* eslint-disable max-lines */
 
 import React from 'react';
-import {FormattedDate, FormattedMessage, FormattedTime} from 'react-intl';
+import type {IntlShape} from 'react-intl';
+import {FormattedDate, FormattedMessage, FormattedTime, injectIntl} from 'react-intl';
 import {Link} from 'react-router-dom';
 
 import type {OAuthApp} from '@mattermost/types/integrations';
@@ -15,14 +16,12 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
 import AccessHistoryModal from 'components/access_history_modal';
 import ActivityLogModal from 'components/activity_log_modal';
 import ExternalLink from 'components/external_link';
-import LocalizedIcon from 'components/localized_icon';
 import SettingItem from 'components/setting_item';
 import SettingItemMax from 'components/setting_item_max';
 import ToggleModalButton from 'components/toggle_modal_button';
 
 import icon50 from 'images/icon50x50.png';
 import Constants from 'utils/constants';
-import {t} from 'utils/i18n';
 import * as Utils from 'utils/utils';
 
 import MfaSection from './mfa_section';
@@ -65,6 +64,7 @@ type Props = {
     passwordConfig: ReturnType<typeof Utils.getPasswordConfig>;
     militaryTime: boolean;
     actions: Actions;
+    intl: IntlShape;
 };
 
 type State = {
@@ -78,7 +78,7 @@ type State = {
     authorizedApps: OAuthApp[];
 };
 
-export default class SecurityTab extends React.PureComponent<Props, State> {
+export class SecurityTab extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = this.getDefaultState();
@@ -123,10 +123,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
 
         if (currentPassword === '') {
             this.setState({
-                passwordError: Utils.localizeMessage(
-                    'user.settings.security.currentPasswordError',
-                    'Please enter your current password.',
-                ),
+                passwordError: this.props.intl.formatMessage({
+                    id: 'user.settings.security.currentPasswordError',
+                    defaultMessage: 'Please enter your current password.',
+                }),
                 serverError: '',
             });
             return;
@@ -146,10 +146,11 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
 
         if (newPassword !== confirmPassword) {
             const defaultState = Object.assign(this.getDefaultState(), {
-                passwordError: Utils.localizeMessage(
-                    'user.settings.security.passwordMatchError',
-                    'The new passwords you entered do not match.',
-                ),
+                passwordError: this.props.intl.formatMessage({
+                    id: 'user.settings.security.passwordMatchError',
+                    defaultMessage:
+                        'The new passwords you entered do not match.',
+                }),
                 serverError: '',
             });
             this.setState(defaultState);
@@ -267,10 +268,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
                                 type='password'
                                 onChange={this.updateCurrentPassword}
                                 value={this.state.currentPassword}
-                                aria-label={Utils.localizeMessage(
-                                    'user.settings.security.currentPassword',
-                                    'Current Password',
-                                )}
+                                aria-label={this.props.intl.formatMessage({
+                                    id: 'user.settings.security.currentPassword',
+                                    defaultMessage: 'Current Password',
+                                })}
                             />
                         </div>
                     </div>,
@@ -293,10 +294,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
                                 type='password'
                                 onChange={this.updateNewPassword}
                                 value={this.state.newPassword}
-                                aria-label={Utils.localizeMessage(
-                                    'user.settings.security.newPassword',
-                                    'New Password',
-                                )}
+                                aria-label={this.props.intl.formatMessage({
+                                    id: 'user.settings.security.newPassword',
+                                    defaultMessage: 'New Password',
+                                })}
                             />
                         </div>
                     </div>,
@@ -319,10 +320,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
                                 type='password'
                                 onChange={this.updateConfirmPassword}
                                 value={this.state.confirmPassword}
-                                aria-label={Utils.localizeMessage(
-                                    'user.settings.security.retypePassword',
-                                    'Retype New Password',
-                                )}
+                                aria-label={this.props.intl.formatMessage({
+                                    id: 'user.settings.security.retypePassword',
+                                    defaultMessage: 'Retype New Password',
+                                })}
                             />
                         </div>
                     </div>,
@@ -721,10 +722,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
 
             max = (
                 <SettingItemMax
-                    title={Utils.localizeMessage(
-                        'user.settings.security.method',
-                        'Sign-in Method',
-                    )}
+                    title={this.props.intl.formatMessage({
+                        id: 'user.settings.security.method',
+                        defaultMessage: 'Sign-in Method',
+                    })}
                     extraInfo={extraInfo}
                     inputs={inputs}
                     serverError={this.state.serverError}
@@ -791,10 +792,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
             <SettingItem
                 active={active}
                 areAllSectionsInactive={this.props.activeSection === ''}
-                title={Utils.localizeMessage(
-                    'user.settings.security.method',
-                    'Sign-in Method',
-                )}
+                title={this.props.intl.formatMessage({
+                    id: 'user.settings.security.method',
+                    defaultMessage: 'Sign-in Method',
+                })}
                 describe={describe}
                 section={SECTION_SIGNIN}
                 updateSection={this.handleUpdateSection}
@@ -929,10 +930,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
             <SettingItem
                 active={active}
                 areAllSectionsInactive={this.props.activeSection === ''}
-                title={Utils.localizeMessage(
-                    'user.settings.security.oauthApps',
-                    'OAuth 2.0 Applications',
-                )}
+                title={this.props.intl.formatMessage({
+                    id: 'user.settings.security.oauthApps',
+                    defaultMessage: 'OAuth 2.0 Applications',
+                })}
                 describe={
                     <FormattedMessage
                         id='user.settings.security.oauthAppsDescription'
@@ -994,7 +995,10 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
                         type='button'
                         className='close'
                         data-dismiss='modal'
-                        aria-label={Utils.localizeMessage('user.settings.security.close', 'Close')}
+                        aria-label={this.props.intl.formatMessage({
+                            id: 'user.settings.security.close',
+                            defaultMessage: 'Close',
+                        })}
                         onClick={this.props.closeModal}
                     >
                         <span aria-hidden='true'>{'×'}</span>
@@ -1003,9 +1007,12 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
                         className='modal-title'
                     >
                         <div className='modal-back'>
-                            <LocalizedIcon
+                            <i
                                 className='fa fa-angle-left'
-                                title={{id: t('generic_icons.collapse'), defaultMessage: 'Collapse Icon'}}
+                                title={this.props.intl.formatMessage({
+                                    id: 'generic_icons.collapse',
+                                    defaultMessage: 'Collapse Icon',
+                                })}
                                 onClick={this.props.collapseModal}
                             />
                         </div>
@@ -1044,9 +1051,12 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
                         dialogType={AccessHistoryModal}
                         id='viewAccessHistory'
                     >
-                        <LocalizedIcon
+                        <i
                             className='fa fa-clock-o'
-                            title={{id: t('user.settings.security.viewHistory.icon'), defaultMessage: 'Access History Icon'}}
+                            title={this.props.intl.formatMessage({
+                                id: 'user.settings.security.viewHistory.icon',
+                                defaultMessage: 'Access History Icon',
+                            })}
                         />
                         <FormattedMessage
                             id='user.settings.security.viewHistory'
@@ -1059,9 +1069,12 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
                         dialogType={ActivityLogModal}
                         id='viewAndLogOutOfActiveSessions'
                     >
-                        <LocalizedIcon
+                        <i
                             className='fa fa-clock-o'
-                            title={{id: t('user.settings.security.logoutActiveSessions.icon'), defaultMessage: 'Active Sessions Icon'}}
+                            title={this.props.intl.formatMessage({
+                                id: 'user.settings.security.logoutActiveSessions.icon',
+                                defaultMessage: 'Active Sessions Icon',
+                            })}
                         />
                         <FormattedMessage
                             id='user.settings.security.logoutActiveSessions'
@@ -1073,3 +1086,5 @@ export default class SecurityTab extends React.PureComponent<Props, State> {
         );
     }
 }
+
+export default injectIntl(SecurityTab);