From ede19891e16d772bd9c842f424d94b88632ea7fb Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 25 Jun 2020 11:00:36 +0200
Subject: [PATCH] Swap Icon to FAIcon wrapper (#3046)

* Swap Icon to FAIcon wrapper

* Small tweaks
---
 packages/apps-routing/src/democracy.ts        |  2 +-
 packages/apps-routing/src/parachains.ts       |  2 +-
 packages/apps-routing/src/settings.ts         |  2 +-
 packages/apps-routing/src/society.ts          |  2 +-
 packages/apps-routing/src/toolbox.ts          |  2 +-
 packages/apps-routing/src/transfer.ts         |  2 +-
 packages/apps-routing/src/types.ts            |  4 +-
 packages/apps/src/Content/index.tsx           |  2 +-
 packages/apps/src/SideBar/ChainInfo.tsx       |  9 ++--
 packages/apps/src/SideBar/Item.tsx            |  2 +-
 packages/apps/src/SideBar/index.tsx           | 12 ++---
 packages/apps/src/overlays/Base.tsx           |  9 ++--
 packages/page-123code/src/Transfer.tsx        |  2 +-
 .../page-accounts/src/Accounts/Account.tsx    | 10 ++--
 packages/page-accounts/src/Accounts/index.tsx |  6 +--
 .../src/Accounts/modals/ChangePass.tsx        |  2 +-
 .../src/Accounts/modals/Identity.tsx          |  2 +-
 .../src/Accounts/modals/MultisigApprove.tsx   |  2 +-
 .../page-accounts/src/Accounts/modals/Qr.tsx  |  2 +-
 .../src/Accounts/modals/RecoverSetup.tsx      |  2 +-
 .../src/Accounts/modals/Transfer.tsx          |  2 +-
 .../page-accounts/src/Contacts/Address.tsx    |  8 +--
 packages/page-accounts/src/Contacts/index.tsx |  2 +-
 .../page-accounts/src/Sidebar/Balances.tsx    |  2 +-
 .../page-accounts/src/Sidebar/Identity.tsx    |  4 +-
 .../page-accounts/src/Sidebar/Multisig.tsx    |  2 +-
 .../page-accounts/src/Sidebar/Sidebar.tsx     | 12 ++---
 packages/page-accounts/src/Vanity/Match.tsx   |  2 +-
 packages/page-accounts/src/Vanity/index.tsx   |  2 +-
 packages/page-claims/src/Attest.tsx           |  2 +-
 packages/page-claims/src/Claim.tsx            |  2 +-
 packages/page-claims/src/index.tsx            |  6 +--
 packages/page-contracts/src/Codes/Add.tsx     |  2 +-
 packages/page-contracts/src/Codes/Code.tsx    |  2 +-
 packages/page-contracts/src/Codes/Upload.tsx  |  2 +-
 packages/page-contracts/src/Contracts/Add.tsx |  2 +-
 .../page-contracts/src/Contracts/Call.tsx     |  6 +--
 .../page-contracts/src/Contracts/Outcome.tsx  |  2 +-
 .../page-contracts/src/Contracts/index.tsx    |  2 +-
 packages/page-contracts/src/Deploy.tsx        |  2 +-
 .../page-contracts/src/shared/CodeRow.tsx     |  4 +-
 .../src/shared/MessageSignature.tsx           |  4 +-
 .../page-contracts/src/shared/Messages.tsx    |  2 +-
 packages/page-council/src/Motions/Close.tsx   |  2 +-
 .../src/Motions/ProposeExternal.tsx           |  2 +-
 .../src/Motions/ProposeMotion.tsx             |  2 +-
 .../page-council/src/Motions/Slashing.tsx     |  2 +-
 packages/page-council/src/Motions/Voting.tsx  |  2 +-
 .../src/Overview/SubmitCandidacy.tsx          |  2 +-
 packages/page-dashboard/src/Entry.tsx         |  2 +-
 .../page-democracy/src/Overview/Fasttrack.tsx |  4 +-
 .../page-democracy/src/Overview/PreImage.tsx  |  2 +-
 .../page-democracy/src/Overview/Propose.tsx   |  2 +-
 .../src/Overview/Referendum.tsx               | 38 +++++++------
 .../src/Overview/ReferendumVotes.tsx          |  4 +-
 .../src/Overview/Referendums.tsx              |  1 +
 .../page-democracy/src/Overview/Seconding.tsx |  4 +-
 .../page-democracy/src/Overview/index.tsx     |  4 +-
 packages/page-extrinsics/src/Selection.tsx    |  4 +-
 packages/page-generic-asset/src/Transfer.tsx  |  2 +-
 packages/page-js/src/ActionButtons.tsx        |  5 +-
 packages/page-js/src/Playground.tsx           |  3 +-
 .../src/Overview/Parachain.tsx                |  2 +-
 .../page-parachains/src/Overview/Register.tsx |  2 +-
 .../page-parachains/src/Overview/index.tsx    |  2 +-
 .../page-parachains/src/Parachain/index.tsx   |  4 +-
 packages/page-settings/src/I18n/index.tsx     |  2 +-
 .../src/Actions/Account/BondExtra.tsx         |  2 +-
 .../src/Actions/Account/InjectKeys.tsx        |  4 +-
 .../Actions/Account/InputValidateAmount.tsx   |  2 +-
 .../Account/InputValidationController.tsx     |  2 +-
 .../Account/InputValidationSessionKey.tsx     |  2 +-
 .../InputValidationUnstakeThreshold.tsx       |  2 +-
 .../src/Actions/Account/Nominate.tsx          |  2 +-
 .../Actions/Account/SetControllerAccount.tsx  |  2 +-
 .../Actions/Account/SetRewardDestination.tsx  |  2 +-
 .../src/Actions/Account/SetSessionKey.tsx     |  2 +-
 .../src/Actions/Account/Validate.tsx          |  2 +-
 .../src/Actions/Account/index.tsx             |  8 +--
 .../page-staking/src/Actions/NewNominator.tsx |  8 +--
 .../page-staking/src/Actions/NewStash.tsx     |  4 +-
 .../page-staking/src/Actions/NewValidator.tsx |  8 +--
 .../src/Overview/Address/Favorite.tsx         |  4 +-
 .../src/Overview/Address/Status.tsx           |  4 +-
 .../src/Overview/Address/index.tsx            |  2 +-
 .../page-staking/src/Payouts/PayButton.tsx    |  4 +-
 packages/page-staking/src/Payouts/Stash.tsx   |  2 +-
 .../page-staking/src/Targets/Nominate.tsx     |  2 +-
 .../page-staking/src/Targets/Validator.tsx    |  4 +-
 packages/page-staking/src/Targets/index.tsx   |  4 +-
 packages/page-storage/src/Query.tsx           |  4 +-
 packages/page-sudo/src/SetKey.tsx             |  4 +-
 packages/page-sudo/src/Sudo.tsx               |  4 +-
 packages/page-sudo/src/index.tsx              |  2 +-
 .../page-tech-comm/src/Proposals/Close.tsx    |  2 +-
 .../page-tech-comm/src/Proposals/Voting.tsx   |  2 +-
 packages/page-toolbox/src/Rpc/Selection.tsx   |  2 +-
 packages/page-toolbox/src/Sign.tsx            |  2 +-
 .../src/Overview/ProposalCreate.tsx           |  2 +-
 .../page-treasury/src/Overview/Submission.tsx |  2 +-
 packages/page-treasury/src/Overview/Tip.tsx   | 18 +++----
 .../page-treasury/src/Overview/TipClose.tsx   |  2 +-
 .../page-treasury/src/Overview/TipCreate.tsx  |  2 +-
 .../page-treasury/src/Overview/TipEndorse.tsx |  2 +-
 packages/page-treasury/src/Overview/Tips.tsx  |  6 +--
 packages/react-components/package.json        |  3 ++
 packages/react-components/src/AccountName.tsx | 15 ++++--
 packages/react-components/src/AddressInfo.tsx |  2 +-
 packages/react-components/src/AddressRow.tsx  |  2 +-
 packages/react-components/src/AvatarItem.tsx  |  4 +-
 packages/react-components/src/Badge.tsx       | 22 ++++----
 .../react-components/src/Button/Button.tsx    | 41 +++++++-------
 packages/react-components/src/Button/types.ts |  3 +-
 .../react-components/src/ButtonCancel.tsx     |  2 +-
 packages/react-components/src/CopyButton.tsx  |  8 +--
 .../react-components/src/DemocracyLocks.tsx   |  4 +-
 packages/react-components/src/EditButton.tsx  |  8 +--
 packages/react-components/src/Expander.tsx    |  6 +--
 packages/react-components/src/HelpOverlay.tsx |  4 +-
 packages/react-components/src/Icon.tsx        | 54 ++++++++++++++++++-
 packages/react-components/src/Inset.tsx       |  2 +-
 packages/react-components/src/LabelHelp.tsx   |  2 +-
 .../react-components/src/StakingUnbonding.tsx |  4 +-
 .../react-components/src/Status/index.tsx     | 25 ++++-----
 packages/react-components/src/Table/Body.tsx  |  4 +-
 packages/react-components/src/Tabs.tsx        |  2 +-
 packages/react-components/src/TxModal.tsx     |  2 +-
 packages/react-components/src/TxModalNew.tsx  |  2 +-
 .../react-components/src/styles/components.ts |  2 +-
 packages/react-components/src/styles/index.ts |  2 +-
 .../react-components/src/styles/semantic.ts   |  2 +-
 packages/react-components/src/styles/theme.ts |  2 +-
 packages/react-components/src/types.ts        |  5 +-
 packages/react-params/src/Param/Vector.tsx    |  2 +-
 packages/react-signer/src/TxSigned.tsx        |  2 +-
 packages/react-signer/src/TxUnsigned.tsx      |  2 +-
 yarn.lock                                     | 40 ++++++++++++++
 137 files changed, 379 insertions(+), 288 deletions(-)

diff --git a/packages/apps-routing/src/democracy.ts b/packages/apps-routing/src/democracy.ts
index e18ad35504..a8551512c2 100644
--- a/packages/apps-routing/src/democracy.ts
+++ b/packages/apps-routing/src/democracy.ts
@@ -14,7 +14,7 @@ export default function create (t: <T = string> (key: string, text: string, opti
         'tx.democracy.notePreimage'
       ]
     },
-    icon: 'calendar check',
+    icon: 'calendar-check',
     name: 'democracy',
     text: t<string>('nav.democracy', 'Democracy', { ns: 'apps-routing' }),
     useCounter
diff --git a/packages/apps-routing/src/parachains.ts b/packages/apps-routing/src/parachains.ts
index f868cd988e..fbccc3e406 100644
--- a/packages/apps-routing/src/parachains.ts
+++ b/packages/apps-routing/src/parachains.ts
@@ -14,7 +14,7 @@ export default function create (t: <T = string> (key: string, text: string, opti
         'query.parachains.code'
       ]
     },
-    icon: 'chain',
+    icon: 'link',
     name: 'parachains',
     text: t<string>('nav.parachains', 'Parachains', { ns: 'apps-routing' })
   };
diff --git a/packages/apps-routing/src/settings.ts b/packages/apps-routing/src/settings.ts
index 705789ebf1..290b18dfd7 100644
--- a/packages/apps-routing/src/settings.ts
+++ b/packages/apps-routing/src/settings.ts
@@ -10,7 +10,7 @@ export default function create (t: <T = string> (key: string, text: string, opti
   return {
     Component: Settings,
     display: {},
-    icon: 'settings',
+    icon: 'cogs',
     name: 'settings',
     text: t<string>('nav.settings', 'Settings', { ns: 'apps-routing' }),
     useCounter
diff --git a/packages/apps-routing/src/society.ts b/packages/apps-routing/src/society.ts
index 8006919d2f..e96a1650ff 100644
--- a/packages/apps-routing/src/society.ts
+++ b/packages/apps-routing/src/society.ts
@@ -15,7 +15,7 @@ export default function create (t: <T = string> (key: string, text: string, opti
         'query.society.pot'
       ]
     },
-    icon: 'grab',
+    icon: 'hand-spock',
     name: 'society',
     text: t<string>('nav.society', 'Society', { ns: 'apps-routing' })
   };
diff --git a/packages/apps-routing/src/toolbox.ts b/packages/apps-routing/src/toolbox.ts
index b8df520fdf..4616ba83b0 100644
--- a/packages/apps-routing/src/toolbox.ts
+++ b/packages/apps-routing/src/toolbox.ts
@@ -12,7 +12,7 @@ export default function create (t: <T = string> (key: string, text: string, opti
     display: {
       needsApi: []
     },
-    icon: 'configure',
+    icon: 'tools',
     name: 'toolbox',
     text: t<string>('nav.toolbox', 'Toolbox', { ns: 'apps-routing' })
   };
diff --git a/packages/apps-routing/src/transfer.ts b/packages/apps-routing/src/transfer.ts
index aab0643c7b..e310512853 100644
--- a/packages/apps-routing/src/transfer.ts
+++ b/packages/apps-routing/src/transfer.ts
@@ -17,7 +17,7 @@ export default function create (t: <T = string> (key: string, text: string, opti
         'tx.balances.transfer'
       ]
     },
-    icon: 'send',
+    icon: 'paper-plane',
     name: 'transfer',
     text: t<string>('nav.transfer', 'Transfer', { ns: 'apps-routing' })
   };
diff --git a/packages/apps-routing/src/types.ts b/packages/apps-routing/src/types.ts
index 5cb8e6dd38..6dce432d8c 100644
--- a/packages/apps-routing/src/types.ts
+++ b/packages/apps-routing/src/types.ts
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 export interface RouteProps extends AppProps, BareProps {
@@ -19,7 +19,7 @@ export interface Route {
     needsApi?: (string | string[])[];
     needsSudo?: boolean;
   };
-  icon: SemanticICONS;
+  icon: IconName;
   isIgnored?: boolean;
   name: string;
   text: string;
diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index b62da37522..b04008fc44 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -24,7 +24,7 @@ const NOT_FOUND: Route = {
   display: {
     needsApi: undefined
   },
-  icon: 'cancel',
+  icon: 'times',
   isIgnored: false,
   name: 'unknown',
   text: 'Unknown'
diff --git a/packages/apps/src/SideBar/ChainInfo.tsx b/packages/apps/src/SideBar/ChainInfo.tsx
index 183ba6b469..0e417ee81e 100644
--- a/packages/apps/src/SideBar/ChainInfo.tsx
+++ b/packages/apps/src/SideBar/ChainInfo.tsx
@@ -36,7 +36,10 @@ function ChainInfo ({ className = '', onClick }: Props): React.ReactElement<Prop
           )}
           <BestNumber label='#' />
         </div>
-        <Icon name='dropdown' />
+        <Icon
+          className='dropdown'
+          icon='caret-down'
+        />
       </div>
     </div>
   );
@@ -61,7 +64,7 @@ export default React.memo(styled(ChainInfo)`
       width: 2.75rem;
     }
 
-    .icon.dropdown,
+    .ui--Icon.dropdown,
     > div.info {
       color: white;
       opacity: 0.75;
@@ -69,7 +72,7 @@ export default React.memo(styled(ChainInfo)`
       vertical-align: middle;
     }
 
-    .icon.dropdown {
+    .ui--Icon.dropdown {
       flex: 0;
       margin: 0;
     }
diff --git a/packages/apps/src/SideBar/Item.tsx b/packages/apps/src/SideBar/Item.tsx
index 8b540c3bc5..b60e0843ce 100644
--- a/packages/apps/src/SideBar/Item.tsx
+++ b/packages/apps/src/SideBar/Item.tsx
@@ -100,7 +100,7 @@ function Item ({ isCollapsed, onClick, route }: Props): React.ReactElement<Props
 
   const body = (
     <>
-      <Icon name={icon} />
+      <Icon icon={icon} />
       <span className='text'>{text}</span>
       {!!count && (
         <Badge
diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx
index 1b72d0b8b3..943fde6cc3 100644
--- a/packages/apps/src/SideBar/index.tsx
+++ b/packages/apps/src/SideBar/index.tsx
@@ -112,7 +112,7 @@ function SideBar ({ className = '', collapse, handleResize, isCollapsed, isMenuO
                 rel='noopener noreferrer'
                 target='_blank'
               >
-                <Icon name='github' /><span className='text'>{t<string>('nav.github', 'GitHub', { ns: 'apps-routing' })}</span>
+                <Icon icon='code-branch' /><span className='text'>{t<string>('nav.github', 'GitHub', { ns: 'apps-routing' })}</span>
               </a>
             </Menu.Item>
             <Menu.Item className='apps--SideBar-Item'>
@@ -122,22 +122,18 @@ function SideBar ({ className = '', collapse, handleResize, isCollapsed, isMenuO
                 rel='noopener noreferrer'
                 target='_blank'
               >
-                <Icon name='book' /><span className='text'>{t<string>('nav.wiki', 'Wiki', { ns: 'apps-routing' })}</span>
+                <Icon icon='book' /><span className='text'>{t<string>('nav.wiki', 'Wiki', { ns: 'apps-routing' })}</span>
               </a>
             </Menu.Item>
             <Menu.Divider hidden />
-            {
-              isCollapsed
-                ? undefined
-                : <NodeInfo />
-            }
+            {!isCollapsed && <NodeInfo />}
           </div>
           <Responsive
             className={`apps--SideBar-collapse ${isCollapsed ? 'collapsed' : 'expanded'}`}
             minWidth={SIDEBAR_MENU_THRESHOLD}
           >
             <Button
-              icon={`angle double ${isCollapsed ? 'right' : 'left'}`}
+              icon={isCollapsed ? 'angle-double-right' : 'angle-double-left'}
               isBasic
               isCircular
               onClick={collapse}
diff --git a/packages/apps/src/overlays/Base.tsx b/packages/apps/src/overlays/Base.tsx
index 5c3b6bdf9e..13a90b2f6f 100644
--- a/packages/apps/src/overlays/Base.tsx
+++ b/packages/apps/src/overlays/Base.tsx
@@ -4,13 +4,14 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { Icon } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 
 interface Props {
   children: React.ReactNode;
   className?: string;
-  icon: string;
+  icon: IconName;
   type: 'error' | 'info';
 }
 
@@ -26,15 +27,15 @@ function BaseOverlay ({ children, className = '', icon, type }: Props): React.Re
       <div className='content'>
         <Icon
           className='contentIcon'
-          name={icon as 'send'}
-          size='big'
+          icon={icon}
+          size='large'
         />
         <div className='contentItem'>
           {children}
         </div>
         <Icon
           className='closeIcon'
-          name='close'
+          icon='times'
           onClick={toggleHidden}
         />
       </div>
diff --git a/packages/page-123code/src/Transfer.tsx b/packages/page-123code/src/Transfer.tsx
index d36b4f05ea..c9e3ff3a0f 100644
--- a/packages/page-123code/src/Transfer.tsx
+++ b/packages/page-123code/src/Transfer.tsx
@@ -33,7 +33,7 @@ function Transfer ({ accountId }: Props): React.ReactElement<Props> {
           <Button.Group>
             <TxButton
               accountId={accountId}
-              icon='send'
+              icon='paper-plane'
               label='make transfer'
               params={[recipientId, amount]}
               tx='balances.transfer'
diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index f58c7a7ff2..c531dc50d6 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -177,8 +177,8 @@ function Account ({ account: { address, meta }, className = '', filter, isFavori
     <tr className={className}>
       <td className='favorite'>
         <Icon
-          className={`${isFavorite ? 'isSelected isColorHighlight' : ''}`}
-          name={isFavorite ? 'star' : 'star outline'}
+          color={isFavorite ? 'orange' : 'gray'}
+          icon='star'
           onClick={_onFavorite}
         />
       </td>
@@ -215,7 +215,7 @@ function Account ({ account: { address, meta }, className = '', filter, isFavori
                 </table>
               </div>
             }
-            info={<Icon name='shield' />}
+            info={<Icon icon='shield' />}
             isInline
             isTooltip
           />
@@ -335,7 +335,7 @@ function Account ({ account: { address, meta }, className = '', filter, isFavori
       </td>
       <td className='button'>
         <Button
-          icon='paper plane'
+          icon='paper-plane'
           label={t<string>('send')}
           onClick={toggleTransfer}
         />
@@ -345,7 +345,7 @@ function Account ({ account: { address, meta }, className = '', filter, isFavori
           onClose={toggleSettings}
           trigger={
             <Button
-              icon='ellipsis vertical'
+              icon='ellipsis-v'
               onClick={toggleSettings}
             />
           }
diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx
index 828f0b9f68..b98034010e 100644
--- a/packages/page-accounts/src/Accounts/index.tsx
+++ b/packages/page-accounts/src/Accounts/index.tsx
@@ -196,7 +196,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
       )}
       <Button.Group>
         <Button
-          icon='add'
+          icon='plus'
           isDisabled={isIpfs}
           label={t<string>('Add account')}
           onClick={toggleCreate}
@@ -222,13 +222,13 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
           </>
         )}
         <Button
-          icon='add'
+          icon='plus'
           isDisabled={!api.tx.multisig && api.tx.utility}
           label={t<string>('Multisig')}
           onClick={toggleMultisig}
         />
         <Button
-          icon='add'
+          icon='plus'
           isDisabled={!api.tx.proxy}
           label={t<string>('Proxied')}
           onClick={toggleProxy}
diff --git a/packages/page-accounts/src/Accounts/modals/ChangePass.tsx b/packages/page-accounts/src/Accounts/modals/ChangePass.tsx
index a48211826e..e14b63a1bb 100644
--- a/packages/page-accounts/src/Accounts/modals/ChangePass.tsx
+++ b/packages/page-accounts/src/Accounts/modals/ChangePass.tsx
@@ -125,7 +125,7 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={!newPass1.isValid || !newPass2.isValid || !isOldValid}
           isPrimary
           label={t<string>('Change')}
diff --git a/packages/page-accounts/src/Accounts/modals/Identity.tsx b/packages/page-accounts/src/Accounts/modals/Identity.tsx
index 1522deb48a..6ad0c72fb4 100644
--- a/packages/page-accounts/src/Accounts/modals/Identity.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Identity.tsx
@@ -211,7 +211,7 @@ function Identity ({ address, className = '', onClose }: Props): React.ReactElem
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={address}
-          icon='send'
+          icon='paper-plane'
           isPrimary
           label={t<string>('Set Identity')}
           onStart={onClose}
diff --git a/packages/page-accounts/src/Accounts/modals/MultisigApprove.tsx b/packages/page-accounts/src/Accounts/modals/MultisigApprove.tsx
index 6fde3f18a2..1b21d9caf2 100644
--- a/packages/page-accounts/src/Accounts/modals/MultisigApprove.tsx
+++ b/packages/page-accounts/src/Accounts/modals/MultisigApprove.tsx
@@ -235,7 +235,7 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
         <TxButton
           accountId={signatory}
           extrinsic={tx}
-          icon={type === 'aye' ? 'check' : 'cancel'}
+          icon={type === 'aye' ? 'check' : 'times'}
           isDisabled={!tx || !whoFilter.length}
           label={type === 'aye' ? 'Approve' : 'Reject'}
           onStart={onClose}
diff --git a/packages/page-accounts/src/Accounts/modals/Qr.tsx b/packages/page-accounts/src/Accounts/modals/Qr.tsx
index f0740e8a92..da0d77b815 100644
--- a/packages/page-accounts/src/Accounts/modals/Qr.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Qr.tsx
@@ -157,7 +157,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={!scanned || !isValid || (isAddress && isIpfs)}
           isPrimary
           label={t<string>('Create')}
diff --git a/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx b/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
index 35161104f7..8f9c54715a 100644
--- a/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
+++ b/packages/page-accounts/src/Accounts/modals/RecoverSetup.tsx
@@ -89,7 +89,7 @@ function RecoverSetup ({ address, className = '', onClose }: Props): React.React
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={address}
-          icon='share alternate'
+          icon='share-alt'
           isDisabled={isErrorHelpers || isErrorThreshold || isErrorDelay}
           label={t<string>('Make recoverable')}
           onStart={onClose}
diff --git a/packages/page-accounts/src/Accounts/modals/Transfer.tsx b/packages/page-accounts/src/Accounts/modals/Transfer.tsx
index 174e979085..a9a85d779f 100644
--- a/packages/page-accounts/src/Accounts/modals/Transfer.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Transfer.tsx
@@ -108,7 +108,7 @@ function Transfer ({ className = '', onClose, recipientId: propRecipientId, send
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={senderId}
-          icon='send'
+          icon='paper-plane'
           isDisabled={!hasAvailable || !recipientId || !amount}
           isPrimary
           label={t<string>('Make Transfer')}
diff --git a/packages/page-accounts/src/Contacts/Address.tsx b/packages/page-accounts/src/Contacts/Address.tsx
index 450b606933..0e53e13ff3 100644
--- a/packages/page-accounts/src/Contacts/Address.tsx
+++ b/packages/page-accounts/src/Contacts/Address.tsx
@@ -150,8 +150,8 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
     <tr className={className}>
       <td className='favorite'>
         <Icon
-          className={`${isFavorite ? 'isSelected isColorHighlight' : ''}`}
-          name={isFavorite ? 'star' : 'star outline'}
+          color={isFavorite ? 'orange' : 'gray'}
+          icon='star'
           onClick={_onFavorite}
         />
       </td>
@@ -196,7 +196,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
       </td>
       <td className='button'>
         <Button
-          icon='paper plane'
+          icon='paper-plane'
           key='deposit'
           label={t<string>('deposit')}
           onClick={_toggleTransfer}
@@ -207,7 +207,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
           onClose={_toggleSettingPopup}
           trigger={
             <Button
-              icon='ellipsis vertical'
+              icon='ellipsis-v'
               onClick={_toggleSettingPopup}
             />
           }
diff --git a/packages/page-accounts/src/Contacts/index.tsx b/packages/page-accounts/src/Contacts/index.tsx
index 7db38612a6..6e64e7e4c9 100644
--- a/packages/page-accounts/src/Contacts/index.tsx
+++ b/packages/page-accounts/src/Contacts/index.tsx
@@ -64,7 +64,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
     <div className={className}>
       <Button.Group>
         <Button
-          icon='add'
+          icon='plus'
           label={t<string>('Add contact')}
           onClick={toggleCreate}
         />
diff --git a/packages/page-accounts/src/Sidebar/Balances.tsx b/packages/page-accounts/src/Sidebar/Balances.tsx
index 146f059e68..13fc07c2c6 100644
--- a/packages/page-accounts/src/Sidebar/Balances.tsx
+++ b/packages/page-accounts/src/Sidebar/Balances.tsx
@@ -22,7 +22,7 @@ function Balances ({ address, className }: Props): React.ReactElement<Props> | n
     <section className={className}>
       <div className='ui--AddressMenu-sectionHeader'>
         <div>
-          <Icon name='sort amount down' />
+          <Icon icon='sort-amount-down' />
           &nbsp;
           {t<string>('balance')}
         </div>
diff --git a/packages/page-accounts/src/Sidebar/Identity.tsx b/packages/page-accounts/src/Sidebar/Identity.tsx
index 318c9ae6ca..7e92d9b33d 100644
--- a/packages/page-accounts/src/Sidebar/Identity.tsx
+++ b/packages/page-accounts/src/Sidebar/Identity.tsx
@@ -32,7 +32,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
       <div className='ui--AddressMenu-section ui--AddressMenu-identity'>
         <div className='ui--AddressMenu-sectionHeader'>
           <div>
-            <Icon name='address card' />
+            <Icon icon='address-card' />
             &nbsp;
             {t<string>('identity')}
           </div>
@@ -158,7 +158,7 @@ function Identity ({ address, identity }: Props): React.ReactElement<Props> | nu
             <ul>
               <li>
                 <IconLink
-                  icon='address card'
+                  icon='address-card'
                   label={t<string>('Add identity judgment')}
                   onClick={toggleIsJudgementOpen}
                 />
diff --git a/packages/page-accounts/src/Sidebar/Multisig.tsx b/packages/page-accounts/src/Sidebar/Multisig.tsx
index f2c7e8d445..a269ebf417 100644
--- a/packages/page-accounts/src/Sidebar/Multisig.tsx
+++ b/packages/page-accounts/src/Sidebar/Multisig.tsx
@@ -27,7 +27,7 @@ function Multisig ({ isMultisig, meta }: Props): React.ReactElement<Props> | nul
     <section>
       <div className='ui--AddressMenu-sectionHeader'>
         <div>
-          <Icon name='handshake outline' />
+          <Icon icon='handshake' />
           &nbsp;
           {t<string>('multisig')}
         </div>
diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx
index 83fa3c84f1..d7f5ff1e11 100644
--- a/packages/page-accounts/src/Sidebar/Sidebar.tsx
+++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx
@@ -49,7 +49,7 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
     <div className={className}>
       <Button
         className='ui--AddressMenu-close'
-        icon='close'
+        icon='times'
         isBasic
         isCircular
         onClick={onClose}
@@ -86,7 +86,7 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
           {(!isEditingName && flags.isEditable) && (
             <Icon
               className='inline-icon'
-              name='edit'
+              icon='edit'
             />
           )}
         </AccountName>
@@ -105,7 +105,7 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
         <div className='ui-AddressMenu--button'>
           <Button.Group>
             <Button
-              icon='send'
+              icon='paper-plane'
               label={t<string>('Deposit')}
               onClick={toggleIsTransferOpen}
             />
@@ -122,7 +122,7 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
             )}
             {!flags.isOwned && !flags.isInContacts && (
               <Button
-                icon='add'
+                icon='plus'
                 isPositive
                 label={t<string>('Save')}
                 onClick={_onUpdateName}
@@ -143,12 +143,12 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
                 size='tiny'
               >
                 <Button.Content visible>
-                  <Icon name='check' />
+                  <Icon icon='check' />
                   &nbsp;
                   {t<string>('Saved')}
                 </Button.Content>
                 <Button.Content hidden>
-                  <Icon name='ban' />
+                  <Icon icon='ban' />
                   &nbsp;
                   {t<string>('Remove')}
                 </Button.Content>
diff --git a/packages/page-accounts/src/Vanity/Match.tsx b/packages/page-accounts/src/Vanity/Match.tsx
index 2d4f8bcad8..6fb4edcc69 100644
--- a/packages/page-accounts/src/Vanity/Match.tsx
+++ b/packages/page-accounts/src/Vanity/Match.tsx
@@ -59,7 +59,7 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo
           size='tiny'
         />
         <Button
-          icon='close'
+          icon='times'
           isNegative
           onClick={_onRemove}
           size='tiny'
diff --git a/packages/page-accounts/src/Vanity/index.tsx b/packages/page-accounts/src/Vanity/index.tsx
index df8fcf0a02..268622d3c4 100644
--- a/packages/page-accounts/src/Vanity/index.tsx
+++ b/packages/page-accounts/src/Vanity/index.tsx
@@ -215,7 +215,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
           icon={
             isRunning
               ? 'stop'
-              : 'sign-in'
+              : 'sign-in-alt'
           }
           isDisabled={!isMatchValid}
           label={
diff --git a/packages/page-claims/src/Attest.tsx b/packages/page-claims/src/Attest.tsx
index 28784fadec..1aa3257d2b 100644
--- a/packages/page-claims/src/Attest.tsx
+++ b/packages/page-claims/src/Attest.tsx
@@ -88,7 +88,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
         <Button.Group>
           <TxButton
             accountId={accountId}
-            icon='send'
+            icon='paper-plane'
             isDisabled={!statementSentence}
             isPrimary
             label={t<string>('I agree')}
diff --git a/packages/page-claims/src/Claim.tsx b/packages/page-claims/src/Claim.tsx
index 6aba5a5ec8..a3a8ab48d2 100644
--- a/packages/page-claims/src/Claim.tsx
+++ b/packages/page-claims/src/Claim.tsx
@@ -86,7 +86,7 @@ function Claim ({ accountId, className = '', ethereumAddress, ethereumSignature,
               <h2><FormatBalance value={claimValue} /></h2>
               <Button.Group>
                 <TxButton
-                  icon='send'
+                  icon='paper-plane'
                   isPrimary
                   isUnsigned
                   label={t('Claim')}
diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx
index 84d7af67ef..520b42f68c 100644
--- a/packages/page-claims/src/index.tsx
+++ b/packages/page-claims/src/index.tsx
@@ -201,7 +201,7 @@ function ClaimsApp (): React.ReactElement {
             {(step === Step.Account) && (
               <Button.Group>
                 <Button
-                  icon='sign-in'
+                  icon='sign-in-alt'
                   isDisabled={preclaimEthereumAddress === PRECLAIMS_LOADING}
                   label={preclaimEthereumAddress === PRECLAIMS_LOADING
                     ? t<string>('Loading')
@@ -229,7 +229,7 @@ function ClaimsApp (): React.ReactElement {
                 {(step === Step.ETHAddress) && (
                   <Button.Group>
                     <Button
-                      icon='sign-in'
+                      icon='sign-in-alt'
                       isDisabled={!ethereumAddress}
                       label={t<string>('Continue')}
                       onClick={goToStepSign}
@@ -272,7 +272,7 @@ function ClaimsApp (): React.ReactElement {
               {(step === Step.Sign) && (
                 <Button.Group>
                   <Button
-                    icon='sign-in'
+                    icon='sign-in-alt'
                     isDisabled={!accountId || !signature}
                     label={t<string>('Confirm claim')}
                     onClick={goToStepClaim}
diff --git a/packages/page-contracts/src/Codes/Add.tsx b/packages/page-contracts/src/Codes/Add.tsx
index 9cfa49f836..7bdc07f05e 100644
--- a/packages/page-contracts/src/Codes/Add.tsx
+++ b/packages/page-contracts/src/Codes/Add.tsx
@@ -54,7 +54,7 @@ function Add (): React.ReactElement {
   return (
     <>
       <Button
-        icon='add'
+        icon='plus'
         label={t('Add an existing code hash')}
         onClick={toggleIsOpen}
       />
diff --git a/packages/page-contracts/src/Codes/Code.tsx b/packages/page-contracts/src/Codes/Code.tsx
index 1dbe48af70..c1e04e37d4 100644
--- a/packages/page-contracts/src/Codes/Code.tsx
+++ b/packages/page-contracts/src/Codes/Code.tsx
@@ -83,7 +83,7 @@ function Code ({ className, code, onShowDeploy }: Props): React.ReactElement<Pro
               tooltip={t('Forget this code hash')}
             />
             <Button
-              icon='cloud upload'
+              icon='upload'
               isPrimary
               label={t('deploy')}
               onClick={_onShowDeploy}
diff --git a/packages/page-contracts/src/Codes/Upload.tsx b/packages/page-contracts/src/Codes/Upload.tsx
index 0c8830f3d1..59169fc187 100644
--- a/packages/page-contracts/src/Codes/Upload.tsx
+++ b/packages/page-contracts/src/Codes/Upload.tsx
@@ -62,7 +62,7 @@ function Upload (): React.ReactElement {
   return (
     <>
       <Button
-        icon='add'
+        icon='plus'
         label={t('Upload WASM')}
         onClick={toggleIsOpen}
       />
diff --git a/packages/page-contracts/src/Contracts/Add.tsx b/packages/page-contracts/src/Contracts/Add.tsx
index a355d72677..37fef142f5 100644
--- a/packages/page-contracts/src/Contracts/Add.tsx
+++ b/packages/page-contracts/src/Contracts/Add.tsx
@@ -67,7 +67,7 @@ function Add (): React.ReactElement {
   return (
     <>
       <Button
-        icon='add'
+        icon='plus'
         label={t('Add an existing contract')}
         onClick={toggleIsOpen}
       />
diff --git a/packages/page-contracts/src/Contracts/Call.tsx b/packages/page-contracts/src/Contracts/Call.tsx
index 33fc93060e..cb4aa8562f 100644
--- a/packages/page-contracts/src/Contracts/Call.tsx
+++ b/packages/page-contracts/src/Contracts/Call.tsx
@@ -204,7 +204,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
           {useRpc
             ? (
               <Button
-                icon='sign-in'
+                icon='sign-in-alt'
                 isDisabled={!isValid}
                 isPrimary
                 label={t<string>('Call')}
@@ -214,7 +214,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
             : (
               <TxButton
                 accountId={accountId}
-                icon='sign-in'
+                icon='sign-in-alt'
                 isDisabled={!isValid}
                 isPrimary
                 label={t('Call')}
@@ -234,7 +234,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
               {t<string>('Call results')}
               <IconLink
                 className='clear-all'
-                icon='close'
+                icon='times'
                 label={t<string>('Clear all')}
                 onClick={_onClearOutcomes}
               />
diff --git a/packages/page-contracts/src/Contracts/Outcome.tsx b/packages/page-contracts/src/Contracts/Outcome.tsx
index 2035592dd3..3bcce547ee 100644
--- a/packages/page-contracts/src/Contracts/Outcome.tsx
+++ b/packages/page-contracts/src/Contracts/Outcome.tsx
@@ -39,7 +39,7 @@ function Outcome ({ className = '', onClear, outcome: { isSuccess, message, orig
         </span>
         <Button
           className='icon-button clear-btn'
-          icon='close'
+          icon='times'
           isPrimary
           onClick={onClear}
           size='mini'
diff --git a/packages/page-contracts/src/Contracts/index.tsx b/packages/page-contracts/src/Contracts/index.tsx
index fd54d7ce3e..a560b035b6 100644
--- a/packages/page-contracts/src/Contracts/index.tsx
+++ b/packages/page-contracts/src/Contracts/index.tsx
@@ -70,7 +70,7 @@ function Contracts (props: Props): React.ReactElement<Props> {
           <Button.Group isCentered>
             {hasCode && (
               <Button
-                icon='cloud upload'
+                icon='upload'
                 label={t('Deploy a code hash')}
                 onClick={onShowDeploy()}
               />
diff --git a/packages/page-contracts/src/Deploy.tsx b/packages/page-contracts/src/Deploy.tsx
index ab99e6377f..58e470439f 100644
--- a/packages/page-contracts/src/Deploy.tsx
+++ b/packages/page-contracts/src/Deploy.tsx
@@ -233,7 +233,7 @@ function Deploy ({ allCodes, basePath, codeHash, constructorIndex = 0, isOpen, o
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={accountId}
-          icon='cloud upload'
+          icon='upload'
           isDisabled={!isValid}
           isPrimary
           label={t('Deploy')}
diff --git a/packages/page-contracts/src/shared/CodeRow.tsx b/packages/page-contracts/src/shared/CodeRow.tsx
index 3ce4a47f0a..40a9f7c994 100644
--- a/packages/page-contracts/src/shared/CodeRow.tsx
+++ b/packages/page-contracts/src/shared/CodeRow.tsx
@@ -73,7 +73,7 @@ function CodeRow ({ buttons, children, className, code: { json }, isInline, with
       icon={
         <div className='ui--CodeRow-icon'>
           <Icon
-            name='code'
+            icon='code'
             size='large'
           />
         </div>
@@ -104,7 +104,7 @@ export default React.memo(
       padding: 0.5rem;
       display: flex;
       justify-content: flex-end;
-      align-items: flex-end;  
+      align-items: flex-end;
     }
   `
 );
diff --git a/packages/page-contracts/src/shared/MessageSignature.tsx b/packages/page-contracts/src/shared/MessageSignature.tsx
index 6eb2bbcbec..fd0f7e7256 100644
--- a/packages/page-contracts/src/shared/MessageSignature.tsx
+++ b/packages/page-contracts/src/shared/MessageSignature.tsx
@@ -67,7 +67,7 @@ function MessageSignature ({ className, message: { args, mutates, name, returnTy
             className='ui--MessageSignature-mutates'
             data-for={`mutates-${name}`}
             data-tip
-            name='database'
+            icon='database'
           />
           {withTooltip && (
             <Tooltip
@@ -95,7 +95,7 @@ export default React.memo(
 
     .ui--MessageSignature-name {
       color: #2f8ddb;
-      font-weight: bold;  
+      font-weight: bold;
     }
 
     .ui--MessageSignature-type {
diff --git a/packages/page-contracts/src/shared/Messages.tsx b/packages/page-contracts/src/shared/Messages.tsx
index 7de42dd5fa..4bca0b574a 100644
--- a/packages/page-contracts/src/shared/Messages.tsx
+++ b/packages/page-contracts/src/shared/Messages.tsx
@@ -97,7 +97,7 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
         <div className='accessory'>
           <Button
             className='execute'
-            icon='cloud upload'
+            icon='upload'
             onClick={onSelectConstructor(props, index)}
             tooltip={t<string>('Deploy with this constructor')}
           />
diff --git a/packages/page-council/src/Motions/Close.tsx b/packages/page-council/src/Motions/Close.tsx
index 75caed53b7..6363911bd4 100644
--- a/packages/page-council/src/Motions/Close.tsx
+++ b/packages/page-council/src/Motions/Close.tsx
@@ -77,7 +77,7 @@ function Close ({ hasFailed, hash, idNumber, isDisabled, members, proposal }: Pr
         </Modal>
       )}
       <Button
-        icon='cancel'
+        icon='times'
         isDisabled={isDisabled}
         label={t<string>('Close')}
         onClick={toggleOpen}
diff --git a/packages/page-council/src/Motions/ProposeExternal.tsx b/packages/page-council/src/Motions/ProposeExternal.tsx
index 3f5cce94cf..8408c7f034 100644
--- a/packages/page-council/src/Motions/ProposeExternal.tsx
+++ b/packages/page-council/src/Motions/ProposeExternal.tsx
@@ -59,7 +59,7 @@ function ProposeExternal ({ className = '', isMember, members }: Props): React.R
   return (
     <>
       <Button
-        icon='add'
+        icon='plus'
         isDisabled={!isMember}
         label={t<string>('Propose external')}
         onClick={toggleVisible}
diff --git a/packages/page-council/src/Motions/ProposeMotion.tsx b/packages/page-council/src/Motions/ProposeMotion.tsx
index a6b2802050..28af4a6867 100644
--- a/packages/page-council/src/Motions/ProposeMotion.tsx
+++ b/packages/page-council/src/Motions/ProposeMotion.tsx
@@ -61,7 +61,7 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> {
   return (
     <>
       <Button
-        icon='add'
+        icon='plus'
         isDisabled={!isMember}
         label={t<string>('Propose motion')}
         onClick={toggleOpen}
diff --git a/packages/page-council/src/Motions/Slashing.tsx b/packages/page-council/src/Motions/Slashing.tsx
index 134ab42add..ecbc7f9768 100644
--- a/packages/page-council/src/Motions/Slashing.tsx
+++ b/packages/page-council/src/Motions/Slashing.tsx
@@ -60,7 +60,7 @@ function Slashing ({ className = '', isMember, members }: Props): React.ReactEle
   return (
     <>
       <Button
-        icon='cancel'
+        icon='times'
         isDisabled={!isMember || !slashes.length}
         label={t<string>('Cancel slashes')}
         onClick={toggleVisible}
diff --git a/packages/page-council/src/Motions/Voting.tsx b/packages/page-council/src/Motions/Voting.tsx
index 2f8172e980..26ecaabac7 100644
--- a/packages/page-council/src/Motions/Voting.tsx
+++ b/packages/page-council/src/Motions/Voting.tsx
@@ -85,7 +85,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
             </Modal.Columns>
             {isPrime && (
               <article className='warning'>
-                <div><Icon name='warning sign' />{t<string>('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
+                <div><Icon icon='exclamation-triangle' />{t<string>('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
               </article>
             )}
           </Modal.Content>
diff --git a/packages/page-council/src/Overview/SubmitCandidacy.tsx b/packages/page-council/src/Overview/SubmitCandidacy.tsx
index c1698ea652..a37aeb14fc 100644
--- a/packages/page-council/src/Overview/SubmitCandidacy.tsx
+++ b/packages/page-council/src/Overview/SubmitCandidacy.tsx
@@ -69,7 +69,7 @@ function SubmitCandidacy ({ electionsInfo }: Props): React.ReactElement<Props> {
         </Modal>
       )}
       <Button
-        icon='add'
+        icon='plus'
         isDisabled={!electionsInfo}
         label={t<string>('Submit candidacy')}
         onClick={onOpen}
diff --git a/packages/page-dashboard/src/Entry.tsx b/packages/page-dashboard/src/Entry.tsx
index 330b784315..e23a66560c 100644
--- a/packages/page-dashboard/src/Entry.tsx
+++ b/packages/page-dashboard/src/Entry.tsx
@@ -19,7 +19,7 @@ function Entry ({ className = '', route: { icon, name, text } }: Props): React.R
     <div className={className}>
       <Link to={`/${name}`}>
         <Icon
-          name={icon}
+          icon={icon}
           size='massive'
         />
         <div className='name'>
diff --git a/packages/page-democracy/src/Overview/Fasttrack.tsx b/packages/page-democracy/src/Overview/Fasttrack.tsx
index 27e1c1d615..1edccba475 100644
--- a/packages/page-democracy/src/Overview/Fasttrack.tsx
+++ b/packages/page-democracy/src/Overview/Fasttrack.tsx
@@ -92,7 +92,7 @@ function Fasttrack ({ imageHash, threshold }: Props): React.ReactElement<Props>
           <Modal.Actions onCancel={toggleFasttrack}>
             <TxButton
               accountId={accountId}
-              icon='fast forward'
+              icon='fast-forward'
               isDisabled={!accountId || !proposal || !memberThreshold}
               isPrimary
               label={t<string>('Fast track')}
@@ -108,7 +108,7 @@ function Fasttrack ({ imageHash, threshold }: Props): React.ReactElement<Props>
         </Modal>
       )}
       <Button
-        icon='fast forward'
+        icon='fast-forward'
         isDisabled={!allowFast}
         label={t<string>('Fast track')}
         onClick={toggleFasttrack}
diff --git a/packages/page-democracy/src/Overview/PreImage.tsx b/packages/page-democracy/src/Overview/PreImage.tsx
index 83afd262f3..da7620f24e 100644
--- a/packages/page-democracy/src/Overview/PreImage.tsx
+++ b/packages/page-democracy/src/Overview/PreImage.tsx
@@ -109,7 +109,7 @@ function PreImage ({ className = '', imageHash, isImminent: propsIsImminent, onC
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={accountId}
-          icon='add'
+          icon='plus'
           isDisabled={!proposal || !accountId || !isMatched || !encodedProposal}
           isPrimary
           label={t<string>('Submit preimage')}
diff --git a/packages/page-democracy/src/Overview/Propose.tsx b/packages/page-democracy/src/Overview/Propose.tsx
index d2f620ee55..d49d5db066 100644
--- a/packages/page-democracy/src/Overview/Propose.tsx
+++ b/packages/page-democracy/src/Overview/Propose.tsx
@@ -99,7 +99,7 @@ function Propose ({ className = '', onClose }: Props): React.ReactElement<Props>
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={accountId}
-          icon='add'
+          icon='plus'
           isDisabled={!balance || !hasMinLocked || !isHashValid || !accountId}
           isPrimary
           label={t<string>('Submit proposal')}
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index b5f4c526d1..d04a488700 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -119,27 +119,19 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
         total={votedNay}
         votes={allNay}
       />
-      <td className='badge together'>
+      <td className='badge'>
         {isBoolean(isPassing) && (
-          <>
-            <Badge
-              color={isPassing ? 'green' : 'red'}
-              hover={
-                isPassing
-                  ? t<string>('{{threshold}}, passing', { replace: { threshold } })
-                  : t<string>('{{threshold}}, not passing', { replace: { threshold } })
-              }
-              info={<Icon name={isPassing ? 'check' : 'cancel'} />}
-              isInline
-              isTooltip
-            />
-            {hasVoted && (
-              <Icon
-                color={hasVotedAye ? 'green' : 'red'}
-                name='check square outline'
-              />
-            )}
-          </>
+          <Badge
+            color={isPassing ? 'green' : 'red'}
+            hover={
+              isPassing
+                ? t<string>('{{threshold}}, passing', { replace: { threshold } })
+                : t<string>('{{threshold}}, not passing', { replace: { threshold } })
+            }
+            info={<Icon icon={isPassing ? 'check' : 'times'} />}
+            isInline
+            isTooltip
+          />
         )}
       </td>
       <td className='button'>
@@ -153,6 +145,12 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
           )}
         </Button.Group>
       </td>
+      <td className='badge'>
+        <Icon
+          color={hasVoted ? (hasVotedAye ? 'green' : 'red') : 'gray'}
+          icon='asterisk'
+        />
+      </td>
       <td className='mini ui--media-1000'>
         <LinkExternal
           data={index}
diff --git a/packages/page-democracy/src/Overview/ReferendumVotes.tsx b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
index af6cb16403..3669783150 100644
--- a/packages/page-democracy/src/Overview/ReferendumVotes.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
@@ -61,7 +61,7 @@ function ReferendumVotes ({ change, className = '', count, index, isWinning, tot
                   className='double-icon'
                   data-for={trigger}
                   data-tip
-                  name={isWinning ? 'arrow alternate circle down' : 'arrow alternate circle up'}
+                  icon={isWinning ? 'arrow alternate circle down' : 'arrow alternate circle up'}
                 />
                 <FormatBalance value={change} />
                 <Tooltip
@@ -90,7 +90,7 @@ function ReferendumVotes ({ change, className = '', count, index, isWinning, tot
 
 export default React.memo(styled(ReferendumVotes)`
   .ui--Expander-summary {
-    i.icon+i.icon {
+    .ui--Icon+.ui--Icon {
       margin-left: -0.375rem;
     }
   }
diff --git a/packages/page-democracy/src/Overview/Referendums.tsx b/packages/page-democracy/src/Overview/Referendums.tsx
index 82f9069350..1c6f8a7414 100644
--- a/packages/page-democracy/src/Overview/Referendums.tsx
+++ b/packages/page-democracy/src/Overview/Referendums.tsx
@@ -26,6 +26,7 @@ function Referendums ({ className = '', referendums }: Props): React.ReactElemen
     [t('aye')],
     [t('nay')],
     [undefined, undefined, 2],
+    [undefined, 'badge'],
     [undefined, 'mini ui--media-1000']
   ], [t]);
 
diff --git a/packages/page-democracy/src/Overview/Seconding.tsx b/packages/page-democracy/src/Overview/Seconding.tsx
index a2f5e027cd..1fc123a9d7 100644
--- a/packages/page-democracy/src/Overview/Seconding.tsx
+++ b/packages/page-democracy/src/Overview/Seconding.tsx
@@ -69,7 +69,7 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
           <Modal.Actions onCancel={toggleSeconding}>
             <TxButton
               accountId={accountId}
-              icon='sign-in'
+              icon='sign-in-alt'
               isDisabled={!accountId || isDepositor}
               isPrimary
               label={t<string>('Second')}
@@ -85,7 +85,7 @@ function Seconding ({ depositors, image, proposalId }: Props): React.ReactElemen
         </Modal>
       )}
       <Button
-        icon='toggle off'
+        icon='toggle-off'
         label={t<string>('Second')}
         onClick={toggleSeconding}
       />
diff --git a/packages/page-democracy/src/Overview/index.tsx b/packages/page-democracy/src/Overview/index.tsx
index dacc7a97f9..75832093bf 100644
--- a/packages/page-democracy/src/Overview/index.tsx
+++ b/packages/page-democracy/src/Overview/index.tsx
@@ -34,12 +34,12 @@ function Overview ({ className }: Props): React.ReactElement<Props> {
       <Summary referendumCount={referendums?.length} />
       <Button.Group>
         <Button
-          icon='add'
+          icon='plus'
           label={t<string>('Submit preimage')}
           onClick={togglePreimage}
         />
         <Button
-          icon='add'
+          icon='plus'
           label={t<string>('Submit proposal')}
           onClick={togglePropose}
         />
diff --git a/packages/page-extrinsics/src/Selection.tsx b/packages/page-extrinsics/src/Selection.tsx
index eb2d08f119..b47d32b7f7 100644
--- a/packages/page-extrinsics/src/Selection.tsx
+++ b/packages/page-extrinsics/src/Selection.tsx
@@ -53,7 +53,7 @@ function Selection (): React.ReactElement {
       <Button.Group>
         <TxButton
           extrinsic={extrinsic}
-          icon='sign-in'
+          icon='sign-in-alt'
           isBasic
           isDisabled={!extrinsic}
           isUnsigned
@@ -63,7 +63,7 @@ function Selection (): React.ReactElement {
         <TxButton
           accountId={accountId}
           extrinsic={extrinsic}
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={!extrinsic || !accountId}
           isPrimary={false}
           label={t<string>('Submit Transaction')}
diff --git a/packages/page-generic-asset/src/Transfer.tsx b/packages/page-generic-asset/src/Transfer.tsx
index 351e9b407d..126b7ada26 100644
--- a/packages/page-generic-asset/src/Transfer.tsx
+++ b/packages/page-generic-asset/src/Transfer.tsx
@@ -115,7 +115,7 @@ function Transfer ({ assets, className = '', onClose, recipientId: propRecipient
         <TxButton
           accountId={senderId}
           extrinsic={extrinsic}
-          icon='send'
+          icon='paper-plane'
           isPrimary
           label={t<string>('Make Transfer')}
           onStart={onClose}
diff --git a/packages/page-js/src/ActionButtons.tsx b/packages/page-js/src/ActionButtons.tsx
index d01e0dc94d..393e50b4d1 100644
--- a/packages/page-js/src/ActionButtons.tsx
+++ b/packages/page-js/src/ActionButtons.tsx
@@ -98,7 +98,6 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
           <Button
             icon='save'
             isDisabled={!snippetName.length}
-            isPrimary
             label={t<string>('Save snippet to local storage')}
             onClick={_saveSnippet}
           />
@@ -107,9 +106,8 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
       {isRunning
         ? (
           <Button
-            icon='close'
+            icon='times'
             isCircular
-            isNegative
             onClick={stopJs}
           />
         )
@@ -118,7 +116,6 @@ function ActionButtons ({ className = '', isCustomExample, isRunning, removeSnip
             className='play-button'
             icon='play'
             isCircular
-            isPrimary
             onClick={runJs}
           />
         )
diff --git a/packages/page-js/src/Playground.tsx b/packages/page-js/src/Playground.tsx
index 031d9646f1..b9ee5703e9 100644
--- a/packages/page-js/src/Playground.tsx
+++ b/packages/page-js/src/Playground.tsx
@@ -258,9 +258,8 @@ function Playground ({ className = '' }: Props): React.ReactElement<Props> {
         >
           <Button
             className='action-button'
-            icon='erase'
+            icon='eraser'
             isCircular
-            isNegative
             onClick={_clearConsole}
           />
         </Output>
diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx
index a0477ad214..c8a7bf07bb 100644
--- a/packages/page-parachains/src/Overview/Parachain.tsx
+++ b/packages/page-parachains/src/Overview/Parachain.tsx
@@ -47,7 +47,7 @@ function Parachain ({ className = '', parachain: { didUpdate, id, info, pendingS
                 : t<string>('Not updated in the last block')
             }
             info={
-              <Icon name='check' />
+              <Icon icon='check' />
             }
             isGray={!didUpdate}
             isTooltip
diff --git a/packages/page-parachains/src/Overview/Register.tsx b/packages/page-parachains/src/Overview/Register.tsx
index 871f1f8177..50993d2e9a 100644
--- a/packages/page-parachains/src/Overview/Register.tsx
+++ b/packages/page-parachains/src/Overview/Register.tsx
@@ -78,7 +78,7 @@ function Register ({ nextFreeId = BN_THOUSAND, sudoKey }: Props): React.ReactEle
     <>
       <div className='ui--Row-buttons'>
         <Button
-          icon='add'
+          icon='plus'
           label={t<string>('Register a parachain')}
           onClick={onOpen}
         />
diff --git a/packages/page-parachains/src/Overview/index.tsx b/packages/page-parachains/src/Overview/index.tsx
index a0d32e7714..00fb4e302b 100644
--- a/packages/page-parachains/src/Overview/index.tsx
+++ b/packages/page-parachains/src/Overview/index.tsx
@@ -45,7 +45,7 @@ function Overview ({ isMine, sudoKey }: Props): React.ReactElement<Props> {
         {actions}
         <article className='error padded'>
           <div>
-            <Icon name='ban' />
+            <Icon icon='ban' />
             {t<string>('There are no registered parachains')}
           </div>
         </article>
diff --git a/packages/page-parachains/src/Parachain/index.tsx b/packages/page-parachains/src/Parachain/index.tsx
index de00878b53..cc86c38933 100644
--- a/packages/page-parachains/src/Parachain/index.tsx
+++ b/packages/page-parachains/src/Parachain/index.tsx
@@ -44,7 +44,7 @@ function Parachain ({ basePath, className = '', isMine, paraInfoRef, sudoKey }:
       <>
         <article className='error padded'>
           <div>
-            <Icon name='ban' />
+            <Icon icon='ban' />
             {t(`No parachain with ${id ? `id ${id.toString()}` : 'this id'} exists`)}
           </div>
         </article>
@@ -76,7 +76,7 @@ function Parachain ({ basePath, className = '', isMine, paraInfoRef, sudoKey }:
                 trigger={
                   <Button
                     className='menu-button'
-                    icon='ellipsis vertical'
+                    icon='ellipsis-v'
                     isPrimary
                     onClick={toggleMenu}
                   />
diff --git a/packages/page-settings/src/I18n/index.tsx b/packages/page-settings/src/I18n/index.tsx
index 2019462bef..6f9f0d7323 100644
--- a/packages/page-settings/src/I18n/index.tsx
+++ b/packages/page-settings/src/I18n/index.tsx
@@ -260,7 +260,7 @@ function Translate ({ className }: Props): React.ReactElement<Props> {
       </div>
       <Button.Group>
         <Button
-          icon='refresh'
+          icon='sync'
           label={t<string>('Apply to UI')}
           onClick={_doApply}
         />
diff --git a/packages/page-staking/src/Actions/Account/BondExtra.tsx b/packages/page-staking/src/Actions/Account/BondExtra.tsx
index e951f59e5f..d277e96992 100644
--- a/packages/page-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/page-staking/src/Actions/Account/BondExtra.tsx
@@ -101,7 +101,7 @@ function BondExtra ({ controllerId, onClose, stakingInfo, stashId }: Props): Rea
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={stashId}
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={!maxAdditional?.gt(BN_ZERO) || !!amountError?.error}
           isPrimary
           label={t<string>('Bond more')}
diff --git a/packages/page-staking/src/Actions/Account/InjectKeys.tsx b/packages/page-staking/src/Actions/Account/InjectKeys.tsx
index 9cc2793d25..af737258f7 100644
--- a/packages/page-staking/src/Actions/Account/InjectKeys.tsx
+++ b/packages/page-staking/src/Actions/Account/InjectKeys.tsx
@@ -92,7 +92,7 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
               value={suri}
             />
             <article className='warning'>
-              <div><Icon name='warning sign' />{t<string>('This operation will submit the seed via an RPC call. Do not perform this operation on a public RPC node, but ensure that the node is local, connected to your validator and secure.')}</div>
+              <div><Icon icon='exclamation-triangle' />{t<string>('This operation will submit the seed via an RPC call. Do not perform this operation on a public RPC node, but ensure that the node is local, connected to your validator and secure.')}</div>
             </article>
           </Modal.Column>
           <Modal.Column>
@@ -134,7 +134,7 @@ function InjectKeys ({ onClose }: Props): React.ReactElement<Props> | null {
       </Modal.Content>
       <Modal.Actions onCancel={onClose}>
         <Button
-          icon='sign-in'
+          icon='sign-in-alt'
           isPrimary
           label={t<string>('Submit key')}
           onClick={_onSubmit}
diff --git a/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx b/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx
index f67dcb24ce..a0283a9f92 100644
--- a/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx
+++ b/packages/page-staking/src/Actions/Account/InputValidateAmount.tsx
@@ -73,7 +73,7 @@ function ValidateAmount ({ currentAmount, onError, stashId, value }: Props): Rea
   if (error || warning) {
     return (
       <article className={error ? 'error' : 'warning'}>
-        <div><Icon name='warning sign' />{error || warning}</div>
+        <div><Icon icon='exclamation-triangle' />{error || warning}</div>
       </article>
     );
   }
diff --git a/packages/page-staking/src/Actions/Account/InputValidationController.tsx b/packages/page-staking/src/Actions/Account/InputValidationController.tsx
index 53178492d3..d81cf94cd9 100644
--- a/packages/page-staking/src/Actions/Account/InputValidationController.tsx
+++ b/packages/page-staking/src/Actions/Account/InputValidationController.tsx
@@ -73,7 +73,7 @@ function ValidateController ({ accountId, controllerId, defaultController, onErr
 
   return (
     <article className={isFatal ? 'error' : 'warning'}>
-      <div><Icon name='warning sign' />{error}</div>
+      <div><Icon icon='exclamation-triangle' />{error}</div>
     </article>
   );
 }
diff --git a/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx b/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx
index 87e364605f..995e02e1ef 100644
--- a/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx
+++ b/packages/page-staking/src/Actions/Account/InputValidationSessionKey.tsx
@@ -37,7 +37,7 @@ function ValidateSessionEd25519 ({ onError, sessionId, stashId }: Props): React.
 
   return (
     <article className='warning'>
-      <div><Icon name='warning sign' />{error}</div>
+      <div><Icon icon='exclamation-triangle' />{error}</div>
     </article>
   );
 }
diff --git a/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx b/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
index e70f72a7cd..b49d02f785 100644
--- a/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
+++ b/packages/page-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx
@@ -38,7 +38,7 @@ function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props):
 
   return (
     <article className='warning'>
-      <div><Icon name='warning sign' />{error}</div>
+      <div><Icon icon='exclamation-triangle' />{error}</div>
     </article>
   );
 }
diff --git a/packages/page-staking/src/Actions/Account/Nominate.tsx b/packages/page-staking/src/Actions/Account/Nominate.tsx
index 4596f23e61..9a1b2ad9a5 100644
--- a/packages/page-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/page-staking/src/Actions/Account/Nominate.tsx
@@ -46,7 +46,7 @@ function Nominate ({ controllerId, next, nominating, onClose, stashId, targets,
         <TxButton
           accountId={controllerId}
           extrinsic={nominateTx}
-          icon='hand paper outline'
+          icon='hand-paper'
           isDisabled={!nominateTx}
           isPrimary
           label={t<string>('Nominate')}
diff --git a/packages/page-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/page-staking/src/Actions/Account/SetControllerAccount.tsx
index 8632867b3d..d2e03d65b5 100644
--- a/packages/page-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/page-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -62,7 +62,7 @@ function SetControllerAccount ({ defaultControllerId, onClose, stashId }: Props)
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={stashId}
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={!controllerId}
           isPrimary
           label={t<string>('Set controller')}
diff --git a/packages/page-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/page-staking/src/Actions/Account/SetRewardDestination.tsx
index 819a166a64..f0a527155c 100644
--- a/packages/page-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/page-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -62,7 +62,7 @@ function SetRewardDestination ({ controllerId, defaultDestination, onClose, stas
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={controllerId}
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={!controllerId}
           isPrimary
           label={t<string>('Set reward destination')}
diff --git a/packages/page-staking/src/Actions/Account/SetSessionKey.tsx b/packages/page-staking/src/Actions/Account/SetSessionKey.tsx
index 4d953f38c4..d11276d71a 100644
--- a/packages/page-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/page-staking/src/Actions/Account/SetSessionKey.tsx
@@ -37,7 +37,7 @@ function SetSessionKey ({ controllerId, onClose, stashId }: Props): React.ReactE
         <TxButton
           accountId={controllerId}
           extrinsic={sessionTx}
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={!sessionTx}
           isPrimary
           label={t<string>('Set Session Key')}
diff --git a/packages/page-staking/src/Actions/Account/Validate.tsx b/packages/page-staking/src/Actions/Account/Validate.tsx
index e4bc243039..23d61dfd3b 100644
--- a/packages/page-staking/src/Actions/Account/Validate.tsx
+++ b/packages/page-staking/src/Actions/Account/Validate.tsx
@@ -37,7 +37,7 @@ function Validate ({ controllerId, onClose, stashId }: Props): React.ReactElemen
         <TxButton
           accountId={controllerId}
           extrinsic={validateTx}
-          icon='check circle outline'
+          icon='certificate'
           isDisabled={!validateTx}
           isPrimary
           label={t<string>('Validate')}
diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index a2a0482c4e..35c25638a6 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -166,7 +166,7 @@ function Account ({ className = '', info: { controllerId, destination, destinati
                     {(!sessionIds.length || hexSessionIdNext === '0x')
                       ? (
                         <Button
-                          icon='sign-in'
+                          icon='sign-in-alt'
                           isDisabled={!isOwnController || isDisabled}
                           key='set'
                           label={t<string>('Session Key')}
@@ -175,7 +175,7 @@ function Account ({ className = '', info: { controllerId, destination, destinati
                       )
                       : (
                         <Button
-                          icon='check circle outline'
+                          icon='certificate'
                           isDisabled={!isOwnController || isDisabled}
                           key='validate'
                           label={t<string>('Validate')}
@@ -184,7 +184,7 @@ function Account ({ className = '', info: { controllerId, destination, destinati
                       )
                     }
                     <Button
-                      icon='hand paper outline'
+                      icon='hand-paper'
                       isDisabled={!isOwnController || isDisabled}
                       key='nominate'
                       label={t<string>('Nominate')}
@@ -199,7 +199,7 @@ function Account ({ className = '', info: { controllerId, destination, destinati
                 onClose={toggleSettings}
                 trigger={
                   <Button
-                    icon='ellipsis vertical'
+                    icon='ellipsis-v'
                     isDisabled={isDisabled}
                     onClick={toggleSettings}
                   />
diff --git a/packages/page-staking/src/Actions/NewNominator.tsx b/packages/page-staking/src/Actions/NewNominator.tsx
index 45c6a32164..ecf8161e1d 100644
--- a/packages/page-staking/src/Actions/NewNominator.tsx
+++ b/packages/page-staking/src/Actions/NewNominator.tsx
@@ -56,7 +56,7 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
   return (
     <>
       <Button
-        icon='add'
+        icon='plus'
         isDisabled={isDisabled}
         key='new-nominator'
         label={t<string>('Nominator')}
@@ -90,7 +90,7 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
           </Modal.Content>
           <Modal.Actions onCancel={_toggle}>
             <Button
-              icon='step backward'
+              icon='step-backward'
               isDisabled={step === 1}
               label={t<string>('prev')}
               onClick={_prevStep}
@@ -99,7 +99,7 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
               ? (
                 <TxButton
                   accountId={stashId}
-                  icon='sign-in'
+                  icon='sign-in-alt'
                   isDisabled={!bondTx || !nominateTx || !stashId || !controllerId}
                   isPrimary
                   label={t<string>('Bond & Nominate')}
@@ -114,7 +114,7 @@ function NewNominator ({ isInElection, next, targets, validators }: Props): Reac
               )
               : (
                 <Button
-                  icon='step forward'
+                  icon='step-forward'
                   isDisabled={!bondTx}
                   isPrimary
                   label={t<string>('next')}
diff --git a/packages/page-staking/src/Actions/NewStash.tsx b/packages/page-staking/src/Actions/NewStash.tsx
index 0dfecffbbb..35f00cfe35 100644
--- a/packages/page-staking/src/Actions/NewStash.tsx
+++ b/packages/page-staking/src/Actions/NewStash.tsx
@@ -27,7 +27,7 @@ function NewStash (): React.ReactElement {
   return (
     <>
       <Button
-        icon='add'
+        icon='plus'
         key='new-stash'
         label={t<string>('Stash')}
         onClick={_toggle}
@@ -44,7 +44,7 @@ function NewStash (): React.ReactElement {
             <TxButton
               accountId={stashId}
               extrinsic={bondTx}
-              icon='sign-in'
+              icon='sign-in-alt'
               isDisabled={!bondTx || !stashId}
               isPrimary
               label={t<string>('Bond')}
diff --git a/packages/page-staking/src/Actions/NewValidator.tsx b/packages/page-staking/src/Actions/NewValidator.tsx
index c5871521f1..c340ac1ae6 100644
--- a/packages/page-staking/src/Actions/NewValidator.tsx
+++ b/packages/page-staking/src/Actions/NewValidator.tsx
@@ -54,7 +54,7 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
   return (
     <>
       <Button
-        icon='add'
+        icon='plus'
         isDisabled={isDisabled}
         key='new-validator'
         label={t<string>('Validator')}
@@ -91,7 +91,7 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
           </Modal.Content>
           <Modal.Actions onCancel={_toggle}>
             <Button
-              icon='step backward'
+              icon='step-backward'
               isDisabled={step === 1}
               label={t<string>('prev')}
               onClick={_prevStep}
@@ -100,7 +100,7 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
               ? (
                 <TxButton
                   accountId={stashId}
-                  icon='sign-in'
+                  icon='sign-in-alt'
                   isDisabled={!bondTx || !sessionTx || !validateTx}
                   isPrimary
                   label={t<string>('Bond & Validate')}
@@ -115,7 +115,7 @@ function NewValidator ({ isInElection }: Props): React.ReactElement<Props> {
               )
               : (
                 <Button
-                  icon='step forward'
+                  icon='step-forward'
                   isDisabled={!bondTx}
                   isPrimary
                   label={t<string>('next')}
diff --git a/packages/page-staking/src/Overview/Address/Favorite.tsx b/packages/page-staking/src/Overview/Address/Favorite.tsx
index fa6567e5c7..93b908a7d6 100644
--- a/packages/page-staking/src/Overview/Address/Favorite.tsx
+++ b/packages/page-staking/src/Overview/Address/Favorite.tsx
@@ -20,8 +20,8 @@ function Favorite ({ address, isFavorite, toggleFavorite }: Props): React.ReactE
   return (
     <td className='favorite'>
       <Icon
-        className={`${isFavorite ? 'isSelected isColorHighlight' : ''}`}
-        name={isFavorite ? 'star' : 'star outline'}
+        color={isFavorite ? 'orange' : 'gray'}
+        icon='star'
         onClick={_onFavorite}
       />
     </td>
diff --git a/packages/page-staking/src/Overview/Address/Status.tsx b/packages/page-staking/src/Overview/Address/Status.tsx
index cda11c3cb7..41bafad4f2 100644
--- a/packages/page-staking/src/Overview/Address/Status.tsx
+++ b/packages/page-staking/src/Overview/Address/Status.tsx
@@ -21,7 +21,7 @@ function Status ({ isElected, numNominators, onlineCount, onlineMessage }: Props
         ? (
           <Badge
             color='blue'
-            info={<Icon name='chevron right' />}
+            info={<Icon icon='chevron-right' />}
             isInline
           />
         )
@@ -35,7 +35,7 @@ function Status ({ isElected, numNominators, onlineCount, onlineMessage }: Props
       {(!!onlineCount || onlineMessage) && (
         <Badge
           color='green'
-          info={onlineCount || <Icon name='envelope' />}
+          info={onlineCount || <Icon icon='envelope' />}
           isInline
         />
       )}
diff --git a/packages/page-staking/src/Overview/Address/index.tsx b/packages/page-staking/src/Overview/Address/index.tsx
index 6840fd6095..04dfe041ca 100644
--- a/packages/page-staking/src/Overview/Address/index.tsx
+++ b/packages/page-staking/src/Overview/Address/index.tsx
@@ -150,7 +150,7 @@ function Address ({ address, className = '', filterName, hasQueries, isAuthor, i
       <td>
         {hasQueries && (
           <Icon
-            name='line graph'
+            icon='chart-line'
             onClick={_onQueryStats}
           />
         )}
diff --git a/packages/page-staking/src/Payouts/PayButton.tsx b/packages/page-staking/src/Payouts/PayButton.tsx
index 3982324626..fa07af1206 100644
--- a/packages/page-staking/src/Payouts/PayButton.tsx
+++ b/packages/page-staking/src/Payouts/PayButton.tsx
@@ -134,7 +134,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac
             <TxButton
               accountId={accountId}
               extrinsic={extrinsic}
-              icon='credit card outline'
+              icon='credit-card'
               isDisabled={!extrinsic || !accountId}
               label={t<string>('Payout')}
               onStart={togglePayout}
@@ -143,7 +143,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac
         </Modal>
       )}
       <Button
-        icon='credit card outline'
+        icon='credit-card'
         isDisabled={isDisabled || isPayoutEmpty}
         label={
           (isAll || Array.isArray(payout))
diff --git a/packages/page-staking/src/Payouts/Stash.tsx b/packages/page-staking/src/Payouts/Stash.tsx
index c2b1ae7d84..c2e78db2fb 100644
--- a/packages/page-staking/src/Payouts/Stash.tsx
+++ b/packages/page-staking/src/Payouts/Stash.tsx
@@ -95,7 +95,7 @@ function Stash ({ className = '', isDisabled, payout: { available, rewards, stas
           <TxButton
             accountId={stakingAccount.controllerId}
             extrinsic={extrinsic}
-            icon='credit card outline'
+            icon='credit-card'
             isDisabled={!extrinsic || isDisabled}
             isPrimary={false}
             label={t<string>('Payout')}
diff --git a/packages/page-staking/src/Targets/Nominate.tsx b/packages/page-staking/src/Targets/Nominate.tsx
index 01e816451d..18a0382694 100644
--- a/packages/page-staking/src/Targets/Nominate.tsx
+++ b/packages/page-staking/src/Targets/Nominate.tsx
@@ -51,7 +51,7 @@ function Nominate ({ className = '', isDisabled, ownNominators, targets }: Props
   return (
     <>
       <Button
-        icon='hand paper outline'
+        icon='hand-paper'
         isDisabled={isDisabled || !filter.length || !targets.length}
         label={t<string>('Nominate selected')}
         onClick={toggleOpen}
diff --git a/packages/page-staking/src/Targets/Validator.tsx b/packages/page-staking/src/Targets/Validator.tsx
index 1b4f5d9d14..7d79738cb2 100644
--- a/packages/page-staking/src/Targets/Validator.tsx
+++ b/packages/page-staking/src/Targets/Validator.tsx
@@ -89,7 +89,7 @@ function Validator ({ canSelect, filterName, info, isSelected, toggleFavorite, t
         {isElected && (
           <Badge
             color='blue'
-            info={<Icon name='chevron right' />}
+            info={<Icon icon='chevron-right' />}
             isInline
           />
         )}
@@ -123,7 +123,7 @@ function Validator ({ canSelect, filterName, info, isSelected, toggleFavorite, t
       <td>
         <Icon
           className='staking--stats'
-          name='line graph'
+          icon='chart-line'
           onClick={_onQueryStats}
         />
       </td>
diff --git a/packages/page-staking/src/Targets/index.tsx b/packages/page-staking/src/Targets/index.tsx
index c2335e985d..19009dac42 100644
--- a/packages/page-staking/src/Targets/index.tsx
+++ b/packages/page-staking/src/Targets/index.tsx
@@ -118,7 +118,7 @@ function Targets ({ className = '', isInElection, ownStashes, targets: { calcWit
   const header = useMemo(() => [
     [t('validators'), 'start', 4],
     ...['rankNumNominators', 'rankComm', 'rankBondTotal', 'rankBondOwn', 'rankBondOther', 'rankOverall'].map((header) => [
-      <>{labels[header]}<Icon name={sortBy === header ? (sortFromMax ? 'chevron down' : 'chevron up') : 'minus'} /></>,
+      <>{labels[header]}<Icon icon={sortBy === header ? (sortFromMax ? 'chevron-down' : 'chevron-up') : 'minus'} /></>,
       `${sorted ? `isClickable ${sortBy === header ? 'ui--highlight--border' : ''} number` : 'number'} ${classes[header] || ''}`,
       1,
       (): void => _sort(header as 'rankComm')
@@ -204,7 +204,7 @@ export default React.memo(styled(Targets)`
   text-align: center;
 
   th {
-    i.icon {
+    .ui--Icon {
       margin-left: 0.5rem;
     }
   }
diff --git a/packages/page-storage/src/Query.tsx b/packages/page-storage/src/Query.tsx
index 16385f79c0..231434788a 100644
--- a/packages/page-storage/src/Query.tsx
+++ b/packages/page-storage/src/Query.tsx
@@ -206,13 +206,13 @@ function Query ({ className = '', onRemove, value }: Props): React.ReactElement<
         <div className='container'>
           {isSpreadable && (
             <Button
-              icon='ellipsis horizontal'
+              icon='ellipsis-h'
               key='spread'
               onClick={_spreadHandler(id)}
             />
           )}
           <Button
-            icon='close'
+            icon='times'
             isNegative
             key='close'
             onClick={_onRemove}
diff --git a/packages/page-sudo/src/SetKey.tsx b/packages/page-sudo/src/SetKey.tsx
index 63f04ba44f..bf8e55ecd5 100644
--- a/packages/page-sudo/src/SetKey.tsx
+++ b/packages/page-sudo/src/SetKey.tsx
@@ -42,7 +42,7 @@ function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React
               />
               <TxButton
                 accountId={sudoKey}
-                icon='sign-in'
+                icon='sign-in-alt'
                 isDisabled={!isMine || sudoKey === selected}
                 isPrimary
                 label={t<string>('Reassign')}
@@ -65,7 +65,7 @@ function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React
       {willLose && (
         <article className='warning padded'>
           <div>
-            <Icon name='warning' />
+            <Icon icon='exclamation-triangle' />
             {t<string>('You will no longer have sudo access')}
           </div>
         </article>
diff --git a/packages/page-sudo/src/Sudo.tsx b/packages/page-sudo/src/Sudo.tsx
index 698a0fff1c..d0f105ea85 100644
--- a/packages/page-sudo/src/Sudo.tsx
+++ b/packages/page-sudo/src/Sudo.tsx
@@ -66,7 +66,7 @@ function Propose ({ className = '', isMine, sudoKey }: Props): React.ReactElemen
         <Button.Group>
           <TxButton
             accountId={sudoKey}
-            icon='sign-in'
+            icon='sign-in-alt'
             isDisabled={!method || (withWeight ? weight.eq(BN_ZERO) : false)}
             label={t<string>('Submit Sudo')}
             params={
@@ -86,7 +86,7 @@ function Propose ({ className = '', isMine, sudoKey }: Props): React.ReactElemen
     : (
       <article className='error padded'>
         <div>
-          <Icon name='ban' />
+          <Icon icon='ban' />
           {t<string>('You do not have access to the current sudo key')}
         </div>
       </article>
diff --git a/packages/page-sudo/src/index.tsx b/packages/page-sudo/src/index.tsx
index fc1c644560..22aca9438b 100644
--- a/packages/page-sudo/src/index.tsx
+++ b/packages/page-sudo/src/index.tsx
@@ -59,7 +59,7 @@ function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
         : (
           <article className='error padded'>
             <div>
-              <Icon name='ban' />
+              <Icon icon='ban' />
               {t<string>('You do not have access to the current sudo key')}
             </div>
           </article>
diff --git a/packages/page-tech-comm/src/Proposals/Close.tsx b/packages/page-tech-comm/src/Proposals/Close.tsx
index b3200b8590..1e7bfee68f 100644
--- a/packages/page-tech-comm/src/Proposals/Close.tsx
+++ b/packages/page-tech-comm/src/Proposals/Close.tsx
@@ -77,7 +77,7 @@ function Close ({ hasFailed, hash, idNumber, isDisabled, members, proposal }: Pr
         </Modal>
       )}
       <Button
-        icon='cancel'
+        icon='times'
         isDisabled={isDisabled}
         label={t<string>('Close')}
         onClick={toggleOpen}
diff --git a/packages/page-tech-comm/src/Proposals/Voting.tsx b/packages/page-tech-comm/src/Proposals/Voting.tsx
index 49fdabaabe..1186e7fb8c 100644
--- a/packages/page-tech-comm/src/Proposals/Voting.tsx
+++ b/packages/page-tech-comm/src/Proposals/Voting.tsx
@@ -55,7 +55,7 @@ function Voting ({ hash, prime, proposalId }: Props): React.ReactElement<Props>
             />
             {isPrime && (
               <article className='warning'>
-                <div><Icon name='warning sign' />{t<string>('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
+                <div><Icon icon='exclamation-triangle' />{t<string>('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')}</div>
               </article>
             )}
           </Modal.Content>
diff --git a/packages/page-toolbox/src/Rpc/Selection.tsx b/packages/page-toolbox/src/Rpc/Selection.tsx
index 31aefd0b9a..70ddfb98bd 100644
--- a/packages/page-toolbox/src/Rpc/Selection.tsx
+++ b/packages/page-toolbox/src/Rpc/Selection.tsx
@@ -95,7 +95,7 @@ function Selection ({ queueRpc }: Props): React.ReactElement<Props> {
       />
       <Button.Group>
         <Button
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={!isValid}
           label={t<string>('Submit RPC call')}
           onClick={_onSubmit}
diff --git a/packages/page-toolbox/src/Sign.tsx b/packages/page-toolbox/src/Sign.tsx
index 32e26776a7..7f1866fc9c 100644
--- a/packages/page-toolbox/src/Sign.tsx
+++ b/packages/page-toolbox/src/Sign.tsx
@@ -211,7 +211,7 @@ function Sign ({ className = '' }: Props): React.ReactElement<Props> {
       </div>
       <Button.Group>
         <Button
-          icon='privacy'
+          icon='key'
           isDisabled={!(isUsable && !isLocked)}
           label={t<string>('Sign message')}
           onClick={_onSign}
diff --git a/packages/page-treasury/src/Overview/ProposalCreate.tsx b/packages/page-treasury/src/Overview/ProposalCreate.tsx
index c72ccbf67d..75a6c68325 100644
--- a/packages/page-treasury/src/Overview/ProposalCreate.tsx
+++ b/packages/page-treasury/src/Overview/ProposalCreate.tsx
@@ -92,7 +92,7 @@ function Propose ({ className }: Props): React.ReactElement<Props> | null {
           <Modal.Actions onCancel={toggleOpen}>
             <TxButton
               accountId={accountId}
-              icon='add'
+              icon='plus'
               isDisabled={!accountId || !hasValue}
               isPrimary
               label={t<string>('Submit proposal')}
diff --git a/packages/page-treasury/src/Overview/Submission.tsx b/packages/page-treasury/src/Overview/Submission.tsx
index f25dcf7cbf..3cf59c60d3 100644
--- a/packages/page-treasury/src/Overview/Submission.tsx
+++ b/packages/page-treasury/src/Overview/Submission.tsx
@@ -119,7 +119,7 @@ function Submission ({ councilProposals, id, isDisabled, members }: Props): Reac
         </Modal>
       )}
       <Button
-        icon='step forward'
+        icon='step-forward'
         isDisabled={isDisabled}
         label={t<string>('To council')}
         onClick={toggleOpen}
diff --git a/packages/page-treasury/src/Overview/Tip.tsx b/packages/page-treasury/src/Overview/Tip.tsx
index dc64a58eaa..976c6911ca 100644
--- a/packages/page-treasury/src/Overview/Tip.tsx
+++ b/packages/page-treasury/src/Overview/Tip.tsx
@@ -92,14 +92,6 @@ function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): R
           </Expander>
         )}
       </td>
-      <td className='badge'>
-        {isMember && isTipper && (
-          <Icon
-            color='green'
-            name='check square outline'
-          />
-        )}
-      </td>
       <td className='button'>
         {closesAt
           ? bestNumber && (
@@ -123,7 +115,7 @@ function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): R
               {finder && (
                 <TxButton
                   accountId={finder}
-                  icon='cancel'
+                  icon='times'
                   isDisabled={!isFinder}
                   label={t('Cancel')}
                   params={[hash]}
@@ -139,6 +131,14 @@ function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): R
           )
         }
       </td>
+      {isMember && (
+        <td className='badge'>
+          <Icon
+            color={isTipper ? 'green' : 'gray'}
+            icon='asterisk'
+          />
+        </td>
+      )}
     </tr>
   );
 }
diff --git a/packages/page-treasury/src/Overview/TipClose.tsx b/packages/page-treasury/src/Overview/TipClose.tsx
index d84955b1ca..4764fbc218 100644
--- a/packages/page-treasury/src/Overview/TipClose.tsx
+++ b/packages/page-treasury/src/Overview/TipClose.tsx
@@ -22,7 +22,7 @@ function TipClose ({ hash, isMember, members }: Props): React.ReactElement<Props
   return (
     <>
       <Button
-        icon='cancel'
+        icon='times'
         isDisabled={!isMember}
         label={t<string>('Close')}
         onClick={toggleOpen}
diff --git a/packages/page-treasury/src/Overview/TipCreate.tsx b/packages/page-treasury/src/Overview/TipCreate.tsx
index 9366b3092a..68e4eb714d 100644
--- a/packages/page-treasury/src/Overview/TipCreate.tsx
+++ b/packages/page-treasury/src/Overview/TipCreate.tsx
@@ -109,7 +109,7 @@ function TipCreate ({ members, refresh }: Props): React.ReactElement<Props> {
           <Modal.Actions onCancel={toggleOpen}>
             <TxButton
               accountId={accountId}
-              icon='add'
+              icon='plus'
               isDisabled={!accountId || (isMember ? !hasValue : false) || !hasReason}
               isPrimary
               label={t<string>('Propose tip')}
diff --git a/packages/page-treasury/src/Overview/TipEndorse.tsx b/packages/page-treasury/src/Overview/TipEndorse.tsx
index 513c430392..fa590fa5b9 100644
--- a/packages/page-treasury/src/Overview/TipEndorse.tsx
+++ b/packages/page-treasury/src/Overview/TipEndorse.tsx
@@ -67,7 +67,7 @@ function TipEndorse ({ hash, isMember, members }: Props): React.ReactElement<Pro
           <Modal.Actions onCancel={toggleOpen}>
             <TxButton
               accountId={accountId}
-              icon='add'
+              icon='plus'
               isDisabled={!accountId}
               isPrimary
               label={t<string>('Submit tip')}
diff --git a/packages/page-treasury/src/Overview/Tips.tsx b/packages/page-treasury/src/Overview/Tips.tsx
index b676bbd4d5..217f6e1f4c 100644
--- a/packages/page-treasury/src/Overview/Tips.tsx
+++ b/packages/page-treasury/src/Overview/Tips.tsx
@@ -29,9 +29,9 @@ function Tips ({ className = '', hashes, isMember, members }: Props): React.Reac
     [t('fee')],
     [t('reason'), 'start'],
     [],
-    [undefined, 'mini'],
-    []
-  ], [t]);
+    [],
+    isMember ? [] : null
+  ].filter((v) => v), [isMember, t]);
 
   return (
     <Table
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index e78d60cd03..9dd944655a 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -11,6 +11,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.10.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.29",
+    "@fortawesome/free-solid-svg-icons": "^5.13.1",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@polkadot/keyring": "^2.15.1",
     "@polkadot/react-api": "0.47.0-beta.9",
     "@polkadot/react-identicon": "^0.55.0-beta.1",
diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index bc4a2cb29e..ec78211434 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -82,7 +82,7 @@ function extractName (address: string, accountIndex?: AccountIndex, defaultName?
       {isSpecial && (
         <Badge
           color='green'
-          info={<Icon name='simplybuilt' />}
+          info={<Icon icon='simplybuilt' />}
           isInline
           isSmall
         />
@@ -125,10 +125,15 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration):
         : identity.displayParent.replace(/[^\x20-\x7E]/g, '')
     )
     : undefined;
-  const nameElem = displayParent
-    ? <span className={`name ${isGood ? 'isGood' : ''}`}><span className='top'>{displayParent}</span><span className='sub'>/{displayName}</span></span>
-    : <span className={`name ${isGood ? 'isGood' : ''}`}>{displayName}</span>;
-  const infoElem = <Icon name={identity.parent ? 'caret square up outline' : (isGood ? 'check' : 'minus')} />;
+  const nameElem = (
+    <span className={`name ${isGood ? 'isGood' : ''}`}>
+      {displayParent
+        ? <><span className='top'>{displayParent}</span><span className='sub'>/{displayName}</span></>
+        : displayName
+      }
+    </span>
+  );
+  const infoElem = <Icon icon={identity.parent ? 'link' : (isGood ? 'check' : 'minus')} />;
   const color = isGood ? 'green' : (isBad ? 'red' : 'gray');
 
   nameCache.set(address, [false, displayParent ? [displayParent, displayName] : [displayName, null]]);
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index 48927e4cf7..b4b947c8d4 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -272,7 +272,7 @@ function renderBalances (props: Props, allAccounts: string[], t: <T = string> (k
               <Icon
                 data-for={`${address}-locks-trigger`}
                 data-tip
-                name='info circle'
+                icon='info-circle'
               />
             }
             value={isAllLocked ? 'all' : balancesAll.lockedBalance}
diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx
index 21d3c2492c..3f4cab1352 100644
--- a/packages/react-components/src/AddressRow.tsx
+++ b/packages/react-components/src/AddressRow.tsx
@@ -69,7 +69,7 @@ export {
 
 export default React.memo(
   styled(AddressRow)`
-    button.ui.icon.editButton {
+    button.u.ui--Icon.editButton {
       padding: 0em .3em .3em .3em;
       color: #2e86ab;
       background: none;
diff --git a/packages/react-components/src/AvatarItem.tsx b/packages/react-components/src/AvatarItem.tsx
index d9faabfd64..b4605a8682 100644
--- a/packages/react-components/src/AvatarItem.tsx
+++ b/packages/react-components/src/AvatarItem.tsx
@@ -53,7 +53,7 @@ export default React.memo(styled(AvatarItem)`
         height: 100%;
       }
 
-      > i.icon {
+      > .ui--Icon {
         color: white;
         line-height: 2.4rem;
         margin-right: 0 !important;
@@ -83,7 +83,7 @@ export default React.memo(styled(AvatarItem)`
         height: 3.4rem;
         margin-right: 0.6rem;
 
-        > i.icon {
+        > .ui--Icon {
           font-size: 1.6rem;
           line-height: 3.4rem;
         }
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index 04deef435c..1c67741d99 100644
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@@ -9,7 +9,7 @@ import Tooltip from './Tooltip';
 
 interface Props {
   className?: string;
-  color: 'counter' | 'green' | 'blue' | 'gray' | 'purple' | 'red' | 'transparent';
+  color: 'counter' | 'green' | 'blue' | 'gray' | 'normal' | 'purple' | 'red' | 'transparent';
   hover?: React.ReactNode;
   info?: React.ReactNode;
   isInline?: boolean;
@@ -20,12 +20,12 @@ interface Props {
 
 let badgeId = 0;
 
-function Badge ({ className = '', color, hover, info, isInline, isSmall, isTooltip, onClick }: Props): React.ReactElement<Props> | null {
+function Badge ({ className = '', color = 'normal', hover, info, isInline, isSmall, isTooltip, onClick }: Props): React.ReactElement<Props> | null {
   const [trigger] = useState(`badge-hover-${Date.now()}-${badgeId++}`);
 
   return (
     <div
-      className={`ui--Badge ${isInline ? 'isInline' : ''} ${isTooltip ? 'isTooltip' : ''} ${isSmall ? 'isSmall' : ''} ${onClick ? 'isClickable' : ''} ${color} ${className}`}
+      className={`ui--Badge ${isInline ? 'isInline' : ''} ${isTooltip ? 'isTooltip' : ''} ${isSmall ? 'isSmall' : ''} ${onClick ? 'isClickable' : ''} ${color}Color ${className}`}
       data-for={trigger}
       data-tip={true}
       data-tip-disable={!isTooltip}
@@ -62,7 +62,7 @@ export default React.memo(styled(Badge)`
     cursor: help;
   }
 
-  i.icon {
+  .ui--Icon {
     cursor: inherit !important;
     margin: 0;
     width: 1em;
@@ -94,34 +94,34 @@ export default React.memo(styled(Badge)`
     vertical-align: middle;
   }
 
-  &.blue {
+  &.blueColor {
     background: steelblue;
   }
 
-  &.counter {
+  &.counterColor {
     background: red;
     margin: 0 0.5rem;
     vertical-align: middle;
   }
 
-  &.gray {
+  &.grayColor {
     background: #eee !important;
     color: #aaa;
   }
 
-  &.red {
+  &.redColor {
     background: darkred;
   }
 
-  &.green {
+  &.greenColor {
     background: green;
   }
 
-  &.purple {
+  &.purpleColor {
     background: indigo;
   }
 
-  &.transparent {
+  &.transparentColor {
     background: transparent;
     box-shadow: none;
   }
diff --git a/packages/react-components/src/Button/Button.tsx b/packages/react-components/src/Button/Button.tsx
index b99d7da906..8e2a0689cb 100644
--- a/packages/react-components/src/Button/Button.tsx
+++ b/packages/react-components/src/Button/Button.tsx
@@ -7,7 +7,6 @@ import { ButtonProps } from './types';
 import React, { useState } from 'react';
 import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
 import styled from 'styled-components';
-import { isUndefined } from '@polkadot/util';
 
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
@@ -21,7 +20,7 @@ function Button ({ children, className = '', floated, icon, isAnimated, isBasic
     animated: isAnimated,
     basic: isBasic,
     circular: isCircular,
-    className: `${className} ${isIcon ? 'isIcon' : ''}`,
+    className: `${className} ${isCircular ? 'isCircular' : ''} ${isIcon ? 'isIcon' : ''} ${(isCircular || isIcon || !(children || label)) ? 'icon' : ''}`,
     'data-for': triggerId,
     'data-tip': !!tooltip,
     disabled: isDisabled,
@@ -36,29 +35,19 @@ function Button ({ children, className = '', floated, icon, isAnimated, isBasic
     positive: isPositive,
     primary: isPrimary,
     secondary: !isBasic && !(isPositive || isPrimary || isNegative),
-    size: size || (isIcon ? 'tiny' : undefined) || 'small',
+    size: size || (isCircular ? undefined : (isIcon ? 'tiny' : 'small')),
     tabIndex
   };
 
   return (
     <>
-      {isUndefined(label) && isUndefined(children)
-        ? (
-          <SUIButton
-            {...props}
-            icon={icon}
-          />
-        )
-        : (
-          <SUIButton {...props}>
-            {icon && (
-              <><Icon className={icon} />{isIcon ? '' : '  '}</>
-            )}
-            {label}
-            {children}
-          </SUIButton>
-        )
-      }
+      <SUIButton {...props}>
+        {icon && (
+          <><Icon icon={icon} />{(isIcon || isCircular) ? '' : '  '}</>
+        )}
+        {label}
+        {children}
+      </SUIButton>
       {tooltip && (
         <Tooltip
           place='top'
@@ -71,8 +60,14 @@ function Button ({ children, className = '', floated, icon, isAnimated, isBasic
 }
 
 export default React.memo(styled(Button)`
-  &:not(.isIcon) > i.icon {
-    margin-left: 0.25rem;
+  &:not(.icon) {
+    > .ui--Icon {
+      margin-right: 0.25rem;
+    }
+  }
+
+  &.icon > .ui--Icon {
+    width: 1rem;
   }
 
   &.isIcon {
@@ -80,7 +75,7 @@ export default React.memo(styled(Button)`
     margin: 0 !important;
     padding: 0 !important;
 
-    i.icon {
+    .ui--Icon {
       margin: 0 0 0 0.25rem !important;
     }
   }
diff --git a/packages/react-components/src/Button/types.ts b/packages/react-components/src/Button/types.ts
index b5751b5550..d98b5d88c5 100644
--- a/packages/react-components/src/Button/types.ts
+++ b/packages/react-components/src/Button/types.ts
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { ButtonProps as SUIButtonProps } from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
 import { BareProps } from '../types';
 
@@ -9,7 +10,7 @@ export type Button$Callback = () => void | Promise<void>;
 
 export interface ButtonProps extends BareProps {
   floated?: 'left' | 'right';
-  icon?: string;
+  icon?: IconName;
   isAnimated?: SUIButtonProps['animated'];
   isBasic?: boolean;
   isCircular?: boolean;
diff --git a/packages/react-components/src/ButtonCancel.tsx b/packages/react-components/src/ButtonCancel.tsx
index 684560325b..a078590ab1 100644
--- a/packages/react-components/src/ButtonCancel.tsx
+++ b/packages/react-components/src/ButtonCancel.tsx
@@ -21,7 +21,7 @@ function ButtonCancel ({ className = '', isDisabled, label, onClick, tabIndex }:
   return (
     <Button
       className={className}
-      icon='cancel'
+      icon='times'
       isDisabled={isDisabled}
       isNegative
       label={label || t<string>('Cancel')}
diff --git a/packages/react-components/src/CopyButton.tsx b/packages/react-components/src/CopyButton.tsx
index 38c4b7a1eb..aa139a70b1 100644
--- a/packages/react-components/src/CopyButton.tsx
+++ b/packages/react-components/src/CopyButton.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { IconProps } from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { BareProps } from './types';
 
 import React, { useCallback, useContext } from 'react';
@@ -16,9 +16,9 @@ import styled from 'styled-components';
 interface Props extends BareProps {
   children?: React.ReactNode;
   className?: string;
-  icon?: string;
+  icon?: IconName;
   isAddress?: boolean;
-  size?: IconProps['size'];
+  size?: 'large' | 'small';
   value: string;
 }
 
@@ -63,7 +63,7 @@ function CopyButton ({ children, className, icon = 'copy', isAddress = false, si
 export default React.memo(styled(CopyButton)`
   cursor: copy;
 
-  button.ui.icon.primary.button.icon-button {
+  button.u.ui--Icon.primary.button.icon-button {
     cursor: copy;
   }
 
diff --git a/packages/react-components/src/DemocracyLocks.tsx b/packages/react-components/src/DemocracyLocks.tsx
index 8335f590ea..011a73cdbd 100644
--- a/packages/react-components/src/DemocracyLocks.tsx
+++ b/packages/react-components/src/DemocracyLocks.tsx
@@ -42,7 +42,7 @@ function DemocracyLocks ({ className = '', value }: Props): React.ReactElement<P
       <Icon
         data-for={trigger}
         data-tip
-        name='clock'
+        icon='clock'
       />
       <FormatBalance value={max} />
       <Tooltip
@@ -76,7 +76,7 @@ function DemocracyLocks ({ className = '', value }: Props): React.ReactElement<P
 export default React.memo(styled(DemocracyLocks)`
   white-space: nowrap;
 
-  i.icon {
+  .ui--Icon {
     margin-left: 0;
     margin-right: 0.25rem;
   }
diff --git a/packages/react-components/src/EditButton.tsx b/packages/react-components/src/EditButton.tsx
index 950ecd5c18..ee14d1fe06 100644
--- a/packages/react-components/src/EditButton.tsx
+++ b/packages/react-components/src/EditButton.tsx
@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { IconProps } from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { BareProps, VoidFn } from './types';
 
 import React from 'react';
@@ -12,9 +12,9 @@ import styled from 'styled-components';
 
 interface Props extends BareProps {
   children?: React.ReactNode;
-  icon?: string;
+  icon?: IconName;
   onClick: VoidFn;
-  size?: IconProps['size'];
+  size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';
 }
 
 function EditButton ({ children, className, icon = 'edit', onClick, size = 'small' }: Props): React.ReactElement<Props> {
@@ -39,7 +39,7 @@ function EditButton ({ children, className, icon = 'edit', onClick, size = 'smal
 export default React.memo(styled(EditButton)`
   cursor: pointer;
 
-  button.ui.icon.primary.button.icon-button {
+  button.u.ui--Icon.primary.button.icon-button {
     cursor: pointer;
   }
 
diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx
index bb62342a27..223aa8cfcc 100644
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@@ -63,9 +63,9 @@ function Expander ({ children, className = '', isOpen, summary, summaryMeta, sum
       >
         <div className='ui--Expander-summary-header'>
           {hasContent
-            ? <Icon name={isExpanded ? 'angle double down' : 'angle double right'} />
+            ? <Icon icon={isExpanded ? 'angle-double-down' : 'angle-double-right'} />
             : withDot
-              ? <Icon name='circle outline' />
+              ? <Icon icon='circle' />
               : undefined
           }{headerMain || t<string>('Details')}
         </div>
@@ -115,7 +115,7 @@ export default React.memo(styled(Expander)`
       text-overflow: ellipsis;
     }
 
-    i.icon {
+    .ui--Icon {
       margin-right: 0.5rem;
     }
 
diff --git a/packages/react-components/src/HelpOverlay.tsx b/packages/react-components/src/HelpOverlay.tsx
index f0b50d372d..a0530e82bc 100644
--- a/packages/react-components/src/HelpOverlay.tsx
+++ b/packages/react-components/src/HelpOverlay.tsx
@@ -22,14 +22,14 @@ function HelpOverlay ({ className = '', md }: Props): React.ReactElement<Props>
     <div className={className}>
       <div className='help-button'>
         <Icon
-          name='help circle'
+          icon='help-circle'
           onClick={toggleVisible}
         />
       </div>
       <div className={`help-slideout ${isVisible ? 'open' : 'closed'}`}>
         <div className='help-button'>
           <Icon
-            name='close'
+            icon='times'
             onClick={toggleVisible}
           />
         </div>
diff --git a/packages/react-components/src/Icon.tsx b/packages/react-components/src/Icon.tsx
index f585911686..b577756d5c 100644
--- a/packages/react-components/src/Icon.tsx
+++ b/packages/react-components/src/Icon.tsx
@@ -2,6 +2,56 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconName, library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import React from 'react';
+import styled from 'styled-components';
 
-export default Icon;
+interface Props {
+  className?: string;
+  color?: 'gray' | 'green' | 'normal' | 'orange' | 'red';
+  icon: IconName;
+  onClick?: () => void;
+  onMouseOut?: () => void;
+  onMouseOver?: () => void;
+  size?: 'large';
+}
+
+// one-time init of FA libraries
+library.add(fas);
+
+function Icon ({ className = '', color = 'normal', icon, onClick, onMouseOut, onMouseOver, size }: Props): React.ReactElement<Props> {
+  return (
+    <FontAwesomeIcon
+      className={`ui--Icon ${color}Color ${onClick ? 'isClickable' : ''} ${className}`}
+      icon={icon}
+      onClick={onClick}
+      onMouseOut={onMouseOut}
+      onMouseOver={onMouseOver}
+      size={size === 'large' ? '2x' : '1x'}
+    />
+  );
+}
+
+export default React.memo(styled(Icon)`
+  &.isClickable {
+    cursor: pointer;
+  }
+
+  &.grayColor {
+    opacity: 0.25;
+  }
+
+  &.greenColor {
+    color: green;
+  }
+
+  &.orangeColor {
+    color: darkorange;
+  }
+
+  &.redColor {
+    color: darkred;
+  }
+`);
diff --git a/packages/react-components/src/Inset.tsx b/packages/react-components/src/Inset.tsx
index 01b718f099..278feeb3ed 100644
--- a/packages/react-components/src/Inset.tsx
+++ b/packages/react-components/src/Inset.tsx
@@ -60,7 +60,7 @@ function Inset ({ children, className = '', header, href, isCollapsible, isError
           <h3>{header}</h3>
           <Icon
             className={classes(isCollapsed && 'collapsed')}
-            name='angle up'
+            icon='angle-up'
           />
         </div>
       )}
diff --git a/packages/react-components/src/LabelHelp.tsx b/packages/react-components/src/LabelHelp.tsx
index 2848910c73..cfad836446 100644
--- a/packages/react-components/src/LabelHelp.tsx
+++ b/packages/react-components/src/LabelHelp.tsx
@@ -27,7 +27,7 @@ function LabelHelp ({ className = '', help }: Props): React.ReactElement<Props>
       <Icon
         data-for={trigger}
         data-tip
-        name='help circle'
+        icon='question-circle'
         onMouseOut={toggleTooltip}
         onMouseOver={toggleTooltip}
       />
diff --git a/packages/react-components/src/StakingUnbonding.tsx b/packages/react-components/src/StakingUnbonding.tsx
index 263adcc2ee..d0ca1d1af8 100644
--- a/packages/react-components/src/StakingUnbonding.tsx
+++ b/packages/react-components/src/StakingUnbonding.tsx
@@ -51,7 +51,7 @@ function StakingUnbonding ({ className = '', value }: Props): React.ReactElement
       <Icon
         data-for={trigger}
         data-tip
-        name='clock'
+        icon='clock'
       />
       <FormatBalance value={total} />
       <Tooltip
@@ -78,7 +78,7 @@ function StakingUnbonding ({ className = '', value }: Props): React.ReactElement
 export default React.memo(styled(StakingUnbonding)`
   white-space: nowrap;
 
-  i.icon {
+  .ui--Icon {
     margin-left: 0;
     margin-right: 0.25rem;
   }
diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx
index 2ddf660eea..98832020f0 100644
--- a/packages/react-components/src/Status/index.tsx
+++ b/packages/react-components/src/Status/index.tsx
@@ -6,6 +6,7 @@ import { QueueStatus, QueueTx, QueueTxStatus } from './types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { registry } from '@polkadot/react-api';
 
 import AddressMini from '../AddressMini';
@@ -23,23 +24,23 @@ interface Props {
   className?: string;
 }
 
-function iconName (status: string): any {
+function iconName (status: string): IconName {
   switch (status) {
     case 'error':
       return 'ban';
 
     case 'event':
-      return 'assistive listening devices';
+      return 'assistive-listening-systems';
 
     case 'received':
-      return 'telegram plane';
+      return 'telegram-plane';
 
     default:
       return 'check';
   }
 }
 
-function signerIconName (status: QueueTxStatus): any {
+function signerIconName (status: QueueTxStatus): IconName {
   switch (status) {
     case 'cancelled':
       return 'ban';
@@ -53,11 +54,11 @@ function signerIconName (status: QueueTxStatus): any {
     case 'dropped':
     case 'invalid':
     case 'usurped':
-      return 'arrow down';
+      return 'arrow-down';
 
     case 'error':
     case 'finalitytimeout':
-      return 'warning sign';
+      return 'exclamation-triangle';
 
     case 'queued':
     // case 'retracted':
@@ -77,11 +78,11 @@ function renderStatus ({ account, action, id, message, removeItem, status }: Que
       <div className='wrapper'>
         <div className='container'>
           <Icon
-            name='close'
+            icon='times'
             onClick={removeItem}
           />
           <div className='short'>
-            <Icon name={iconName(status) as 'send'} />
+            <Icon icon={iconName(status)} />
           </div>
           <div className='desc'>
             <div className='header'>
@@ -123,14 +124,14 @@ function renderItem ({ error, extrinsic, id, removeItem, rpc, status }: QueueTx)
         <div className='container'>
           {STATUS_COMPLETE.includes(status) && (
             <Icon
-              name='close'
+              icon='times'
               onClick={removeItem}
             />
           )}
           <div className='short'>
             {icon === 'spinner'
               ? <Spinner variant='push' />
-              : <Icon name={icon} />
+              : <Icon icon={icon} />
             }
           </div>
           <div className='desc'>
@@ -188,7 +189,7 @@ function Status ({ className = '' }: Props): React.ReactElement<Props> | null {
       {(allSt.length + completedTx.length) > 1 && (
         <div className='dismiss'>
           <Button
-            icon='cancel'
+            icon='times'
             isFluid
             isPrimary
             label={t<string>('Dismiss all notifications')}
@@ -263,7 +264,7 @@ export default React.memo(styled(Status)`
         opacity:  0.75;
         padding: 0.5rem 0 0.5rem 0.5rem;
 
-        i.icon {
+        .ui--Icon {
           line-height: 1;
         }
       }
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index 5168af9d14..0414ed9442 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -51,7 +51,7 @@ export default React.memo(styled(Body)`
       white-space: nowrap;
     }
 
-    i.icon {
+    .ui--Icon {
       cursor: pointer;
     }
 
@@ -137,7 +137,7 @@ export default React.memo(styled(Body)`
       }
     }
 
-    &.favorite i.icon.isSelected {
+    &.favorite .ui--Icon.isSelected {
       color: darkorange;
     }
   }
diff --git a/packages/react-components/src/Tabs.tsx b/packages/react-components/src/Tabs.tsx
index 6bb4921f8a..2e83e4b649 100644
--- a/packages/react-components/src/Tabs.tsx
+++ b/packages/react-components/src/Tabs.tsx
@@ -55,7 +55,7 @@ function renderItem ({ basePath, isSequence, items }: Props): (tabItem: TabItem,
           {text}
         </NavLink>
         {(isSequence && index < items.length - 1) && (
-          <MyIcon name='arrow right' />
+          <MyIcon icon='arrow-right' />
         )}
       </React.Fragment>
     );
diff --git a/packages/react-components/src/TxModal.tsx b/packages/react-components/src/TxModal.tsx
index 9d51c2767c..70f5639c25 100644
--- a/packages/react-components/src/TxModal.tsx
+++ b/packages/react-components/src/TxModal.tsx
@@ -149,7 +149,7 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
             ? { isUnsigned: true }
             : { accountId }
         )}
-        icon='sign-in'
+        icon='sign-in-alt'
         isDisabled={this.isDisabled()}
         isPrimary
         label={this.submitLabel()}
diff --git a/packages/react-components/src/TxModalNew.tsx b/packages/react-components/src/TxModalNew.tsx
index 3ea8851101..9acfac8990 100644
--- a/packages/react-components/src/TxModalNew.tsx
+++ b/packages/react-components/src/TxModalNew.tsx
@@ -28,7 +28,7 @@ function TxModal<P extends Props> ({
   inputAddressLabel = t<string>('using my account'),
   inputAddressHelp = t<string>('Select the account to use for this action.'),
   inputAddressProps = {},
-  submitButtonIcon = 'sign-in',
+  submitButtonIcon = 'sign-in-alt',
   submitButtonLabel = t<string>('Submit'),
   submitButtonProps = {},
   ...props
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
index 493e421aeb..fd0e138d33 100644
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@@ -45,7 +45,7 @@ export default css`
     margin: 0;
   }
 
-  button.ui.icon.icon-button {
+  button.u.ui--Icon.icon-button {
     padding-top: 0;
     padding-right: 0;
     padding-bottom: 0.3em;
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index ca10d169d7..fdb4e6a4ad 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -49,7 +49,7 @@ export default createGlobalStyle<Props>`
   }
 
   .ui--highlight--icon {
-    i.icon {
+    .ui--Icon {
       color: ${getHighlight} !important;
     }
   }
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
index edba037fe7..9cc7ea49ee 100644
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@@ -154,7 +154,7 @@ export default css`
     padding-left: 4rem !important;
   }
 
-  .ui[class*="left icon"].input.left.icon > i.icon.big {
+  .ui[class*="left icon"].input.left.icon > .ui--Icon.big {
     left: -7px;
     opacity: 1;
   }
diff --git a/packages/react-components/src/styles/theme.ts b/packages/react-components/src/styles/theme.ts
index a8eb9e927d..c289bf2835 100644
--- a/packages/react-components/src/styles/theme.ts
+++ b/packages/react-components/src/styles/theme.ts
@@ -47,7 +47,7 @@ export default css`
       }
 
       &.isIcon {
-        i.icon {
+        .ui--Icon {
           color: ${colorLink};
         }
       }
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 03c8e0d1e7..9c0231d8ca 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -4,6 +4,7 @@
 
 import { WithTranslation } from 'react-i18next';
 import { ButtonProps as SUIButtonProps } from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
+import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { Abi } from '@polkadot/api-contract';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
@@ -55,7 +56,7 @@ export interface TxButtonProps extends TxProps {
   accountId?: AccountId | StringOrNull;
   accountNonce?: Index;
   className?: string;
-  icon?: string;
+  icon?: IconName;
   iconSize?: SUIButtonProps['size'];
   isBasic?: boolean;
   isDisabled?: boolean;
@@ -99,7 +100,7 @@ export interface TxModalProps extends I18nProps, TxState {
   inputAddressProps?: Pick<InputAddressProps, never>;
   cancelButtonLabel?: React.ReactNode;
   cancelButtonProps?: Pick<ButtonProps, never>;
-  submitButtonIcon?: string;
+  submitButtonIcon?: IconName;
   submitButtonLabel?: React.ReactNode;
   submitButtonProps?: Pick<TxButtonProps, never>;
 }
diff --git a/packages/react-params/src/Param/Vector.tsx b/packages/react-params/src/Param/Vector.tsx
index e638efb2e9..ec417cc69e 100644
--- a/packages/react-params/src/Param/Vector.tsx
+++ b/packages/react-params/src/Param/Vector.tsx
@@ -99,7 +99,7 @@ function Vector ({ className = '', defaultValue, isDisabled = false, label, onCh
       {!isDisabled && (
         <div className='ui--Param-Vector-buttons'>
           <Button
-            icon='add'
+            icon='plus'
             isPrimary
             label={t<string>('Add item')}
             onClick={_rowAdd}
diff --git a/packages/react-signer/src/TxSigned.tsx b/packages/react-signer/src/TxSigned.tsx
index 27a731623d..e9e0ce789d 100644
--- a/packages/react-signer/src/TxSigned.tsx
+++ b/packages/react-signer/src/TxSigned.tsx
@@ -344,7 +344,7 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea
               icon={
                 flags.isQr
                   ? 'qrcode'
-                  : 'sign-in'
+                  : 'sign-in-alt'
               }
               isDisabled={!senderInfo.signAddress || isRenderError}
               isPrimary
diff --git a/packages/react-signer/src/TxUnsigned.tsx b/packages/react-signer/src/TxUnsigned.tsx
index 5cf5ba7b67..1261b1f38d 100644
--- a/packages/react-signer/src/TxUnsigned.tsx
+++ b/packages/react-signer/src/TxUnsigned.tsx
@@ -72,7 +72,7 @@ function TxUnsigned ({ className, currentItem }: Props): React.ReactElement<Prop
       </Modal.Content>
       <Modal.Actions onCancel={_onCancel}>
         <Button
-          icon='sign-in'
+          icon='sign-in-alt'
           isDisabled={isRenderError}
           isPrimary
           label={t('Submit (no signature)')}
diff --git a/yarn.lock b/yarn.lock
index c681f444ea..cf50b68947 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1568,6 +1568,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fortawesome/fontawesome-common-types@npm:^0.2.29":
+  version: 0.2.29
+  resolution: "@fortawesome/fontawesome-common-types@npm:0.2.29"
+  checksum: 3/4a427503e1420a274f88082b6c0fb0c831a1c97fe58f7d6feb98daf096007a47d40f53adec281a31c9195dea79df84b4ea878a7d1a09dfcfb800e790218c37d2
+  languageName: node
+  linkType: hard
+
+"@fortawesome/fontawesome-svg-core@npm:^1.2.29":
+  version: 1.2.29
+  resolution: "@fortawesome/fontawesome-svg-core@npm:1.2.29"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": ^0.2.29
+  checksum: 3/3058b6ee89a3c998016a18510bee99ccac1648ac10c59a7095d60f285259f89b2fc42e65d534e38388f39e3145f0ebd2c4b5ea9659a73f7246d55c767b7c7e57
+  languageName: node
+  linkType: hard
+
+"@fortawesome/free-solid-svg-icons@npm:^5.13.1":
+  version: 5.13.1
+  resolution: "@fortawesome/free-solid-svg-icons@npm:5.13.1"
+  dependencies:
+    "@fortawesome/fontawesome-common-types": ^0.2.29
+  checksum: 3/601b03728a1370667dfc860d9d70cd00d1a0eb0a02d83f1a581ad87595838e1d9d9d95327a18e0d6c9c885a7a4236d91d3e26789489e8b54b8ff46a2183b0ed3
+  languageName: node
+  linkType: hard
+
+"@fortawesome/react-fontawesome@npm:^0.1.11":
+  version: 0.1.11
+  resolution: "@fortawesome/react-fontawesome@npm:0.1.11"
+  dependencies:
+    prop-types: ^15.7.2
+  peerDependencies:
+    "@fortawesome/fontawesome-svg-core": ^1.2.20
+    react: 16.x
+  checksum: 3/ede137d0f7d205295d30caeaabb1651f2d60ee2adcefda14578e4259c2c80e8ca47a4f1f6c4a22cca98d6acb19e8cfa3357e3c5dd3897fcc48269a93b1104af6
+  languageName: node
+  linkType: hard
+
 "@hapi/address@npm:2.x.x":
   version: 2.1.4
   resolution: "@hapi/address@npm:2.1.4"
@@ -3391,6 +3428,9 @@ __metadata:
   resolution: "@polkadot/react-components@workspace:packages/react-components"
   dependencies:
     "@babel/runtime": ^7.10.3
+    "@fortawesome/fontawesome-svg-core": ^1.2.29
+    "@fortawesome/free-solid-svg-icons": ^5.13.1
+    "@fortawesome/react-fontawesome": ^0.1.11
     "@polkadot/keyring": ^2.15.1
     "@polkadot/react-api": 0.47.0-beta.9
     "@polkadot/react-identicon": ^0.55.0-beta.1