Swap Icon to FAIcon wrapper (#3046)

* Swap Icon to FAIcon wrapper

* Small tweaks

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

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' })
   };

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

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' })
   };

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' })
   };

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' })
   };

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;

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'

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;
     }

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

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}

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>

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'

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}
             />
           }

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}

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')}

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}

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}

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')}

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}

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')}

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}
             />
           }

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}
         />

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>

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}
                 />

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>

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>

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'

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={

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')}

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')}

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}

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}
       />

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}

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}
       />

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}
       />

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}
               />

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'

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()}
               />

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')}

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;
     }
   `
 );

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 {

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')}
           />

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}

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}

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}

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}

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>

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}

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'>

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}

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')}

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')}

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}

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;
     }
   }

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]);
 

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}
       />

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}
         />

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')}

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}

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}
           />
         )

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>

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

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}
         />

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>

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}
                   />

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}
         />

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')}

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}

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>
     );
   }

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>
   );
 }

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>
   );
 }

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>
   );
 }

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')}

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')}

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')}

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')}

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')}

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}
                   />

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')}

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')}

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')}

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>

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
         />
       )}

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}
           />
         )}

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))

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')}

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}

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>

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;
     }
   }

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}

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>

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>

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>

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}

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>

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}

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}

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')}

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}