diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
index 673987563..d0b9d7084 100644
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/ui/components/app/account-menu/account-menu.component.js
@@ -40,8 +40,14 @@ import IconImport from '../../ui/icon/icon-import';
 import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
-import { Icon, ICON_NAMES } from '../../component-library';
 import { Color } from '../../../helpers/constants/design-system';
+import {
+  Icon,
+  ICON_NAMES,
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  ICON_SIZES,
+  ///: END:ONLY_INCLUDE_IN
+} from '../../component-library';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -430,7 +436,7 @@ export default class AccountMenu extends Component {
               }}
               icon={
                 <div className="account-menu__notifications">
-                  <i className="fa fa-bell fa-xl" />
+                  <Icon name={ICON_NAMES.NOTIFICATION} size={ICON_SIZES.LG} />
                   {unreadNotificationsCount > 0 && (
                     <div className="account-menu__notifications__count">
                       {unreadNotificationsCount}
diff --git a/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js b/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js
index aadd20d0a..da8fa8355 100644
--- a/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js
+++ b/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js
@@ -20,7 +20,7 @@ function getDescriptionNode(
 ) {
   return (
     <div className="permission" key={`${permissionName}-${index}`}>
-      <i className={leftIcon} />
+      {typeof leftIcon === 'string' ? <i className={leftIcon} /> : leftIcon}
       {label}
       {rightIcon && <i className={rightIcon} />}
     </div>
diff --git a/ui/components/app/tab-bar/tab-bar.stories.js b/ui/components/app/tab-bar/tab-bar.stories.js
index 7cb3c1bec..096a64005 100644
--- a/ui/components/app/tab-bar/tab-bar.stories.js
+++ b/ui/components/app/tab-bar/tab-bar.stories.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Icon, ICON_NAMES } from '../../component-library';
 import TabBar from '.';
 
 export default {
@@ -38,7 +39,7 @@ export default {
         key: 'securityAndPrivacy',
       },
       {
-        icon: <i className="fa fa-bell" />,
+        icon: <Icon name={ICON_NAMES.NOTIFICATION} />,
         content: 'Alerts',
         key: 'alerts',
       },
diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js
index 7c92aebe0..1afe88597 100644
--- a/ui/helpers/constants/settings.js
+++ b/ui/helpers/constants/settings.js
@@ -1,3 +1,4 @@
+import { ICON_NAMES } from '../../components/component-library';
 import {
   ALERTS_ROUTE,
   ADVANCED_ROUTE,
@@ -223,7 +224,7 @@ export const SETTINGS_CONSTANTS = [
     sectionMessage: (t) => t('alertSettingsUnconnectedAccount'),
     descriptionMessage: (t) => t('alertSettingsUnconnectedAccount'),
     route: `${ALERTS_ROUTE}#unconnected-account`,
-    icon: 'fa fa-bell',
+    iconName: ICON_NAMES.NOTIFICATION,
   },
   {
     tabMessage: (t) => t('alerts'),
diff --git a/ui/helpers/utils/permission.js b/ui/helpers/utils/permission.js
index fcdcf349b..de60aaf57 100644
--- a/ui/helpers/utils/permission.js
+++ b/ui/helpers/utils/permission.js
@@ -14,6 +14,7 @@ import {
 } from '../../../shared/constants/permissions';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
 import { SNAPS_METADATA } from '../../../shared/constants/snaps';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 import { coinTypeToProtocolName, getSnapDerivationPathName } from './util';
 ///: END:ONLY_INCLUDE_IN
 
@@ -40,7 +41,7 @@ const PERMISSION_DESCRIPTIONS = deepFreeze({
     weight: 3,
   }),
   [RestrictedMethods.snap_notify]: (t) => ({
-    leftIcon: 'fas fa-bell',
+    leftIcon: <Icon name={ICON_NAMES.NOTIFICATION} />,
     label: t('permission_notifications'),
     rightIcon: null,
     weight: 3,
diff --git a/ui/pages/settings/settings-search-list/settings-search-list.js b/ui/pages/settings/settings-search-list/settings-search-list.js
index 171e7ec5d..7ed1b536a 100644
--- a/ui/pages/settings/settings-search-list/settings-search-list.js
+++ b/ui/pages/settings/settings-search-list/settings-search-list.js
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { highlightSearchedText } from '../../../helpers/utils/settings-search';
 import { I18nContext } from '../../../contexts/i18n';
 import IconCaretRight from '../../../components/ui/icon/icon-caret-right';
+import { Icon } from '../../../components/component-library';
 
 export default function SettingsSearchList({ results, onClickSetting }) {
   const t = useContext(I18nContext);
@@ -13,7 +14,7 @@ export default function SettingsSearchList({ results, onClickSetting }) {
   return (
     <div className="settings-page__header__search__list">
       {results.slice(0, 5).map((result) => {
-        const { icon, tabMessage, sectionMessage, route } = result;
+        const { icon, iconName, tabMessage, sectionMessage, route } = result;
         return (
           Boolean(icon || tabMessage || sectionMessage) && (
             <div key={`settings_${route}`}>
@@ -21,13 +22,16 @@ export default function SettingsSearchList({ results, onClickSetting }) {
                 className="settings-page__header__search__list__item"
                 onClick={() => onClickSetting(result)}
               >
-                <i
-                  className={classnames(
-                    'settings-page__header__search__list__item__icon',
-                    icon,
-                  )}
-                />
-
+                {iconName ? (
+                  <Icon name={iconName} />
+                ) : (
+                  <i
+                    className={classnames(
+                      'settings-page__header__search__list__item__icon',
+                      icon,
+                    )}
+                  />
+                )}
                 <span
                   id={`menu-tab_${route}`}
                   className={classnames(
diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js
index 5c6a05497..042702381 100644
--- a/ui/pages/settings/settings.component.js
+++ b/ui/pages/settings/settings.component.js
@@ -28,6 +28,7 @@ import {
 
 import { getSettingsRoutes } from '../../helpers/utils/settings-search';
 import AddNetwork from '../../components/app/add-network/add-network';
+import { Icon, ICON_NAMES } from '../../components/component-library';
 import SettingsTab from './settings-tab';
 import AlertsTab from './alerts-tab';
 import NetworksTab from './networks-tab';