diff --git a/webapp/channels/src/components/user_settings/sidebar/user_settings_sidebar.tsx b/webapp/channels/src/components/user_settings/sidebar/user_settings_sidebar.tsx
index 945ad8ac65..b763ecc02f 100644
--- a/webapp/channels/src/components/user_settings/sidebar/user_settings_sidebar.tsx
+++ b/webapp/channels/src/components/user_settings/sidebar/user_settings_sidebar.tsx
@@ -2,11 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
-
-import LocalizedIcon from 'components/localized_icon';
-
-import {t} from 'utils/i18n';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import LimitVisibleGMsDMs from './limit_visible_gms_dms';
 import ShowUnreadsCategory from './show_unreads_category';
@@ -19,6 +15,8 @@ export interface Props {
 }
 
 export default function UserSettingsSidebar(props: Props): JSX.Element {
+    const {formatMessage} = useIntl();
+
     return (
         <div>
             <div className='modal-header'>
@@ -37,9 +35,9 @@ export default function UserSettingsSidebar(props: Props): JSX.Element {
                         className='modal-back'
                         onClick={props.collapseModal}
                     >
-                        <LocalizedIcon
+                        <i
                             className='fa fa-angle-left'
-                            title={{id: t('generic_icons.collapse'), defaultMessage: 'Collapse Icon'}}
+                            title={formatMessage({id: 'generic_icons.collapse', defaultMessage: 'Collapse Icon'})}
                         />
                     </div>
                     <FormattedMessage