diff --git a/packages/ui-signer/src/Fees/Proposal.tsx b/packages/ui-signer/src/Fees/Proposal.tsx
index 4360f874b8..3edeea4e15 100644
--- a/packages/ui-signer/src/Fees/Proposal.tsx
+++ b/packages/ui-signer/src/Fees/Proposal.tsx
@@ -10,6 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { Compact } from '@polkadot/types/codec';
 import { withCall, withMulti } from '@polkadot/ui-api/index';
+import { Icon } from '@polkadot/ui-app/index';
 import { balanceFormat } from '@polkadot/ui-reactive/util/index';
 
 import translate from '../translate';
@@ -62,21 +63,21 @@ class Proposal extends React.PureComponent<Props, State> {
 
     return [
       isBelowMinimum
-        ? <li key='belowmin'>{t('proposal.belowmin', {
+        ? <div key='belowmin'><Icon name='warning sign' />{t('proposal.belowmin', {
           defaultValue: 'The deposit is below the {{minimum}} minimum required for the proposal to be evaluated',
           replace: {
             minimum: balanceFormat(query_democracy_minimumDeposit)
           }
-        })}</li>
+        })}</div>
         : undefined,
       extraAmount.isZero()
         ? undefined
-        : <li key='infodeposit'>{t('proposal.deposit', {
+        : <div key='infodeposit'><Icon name='arrow right' />{t('proposal.deposit', {
           defaultValue: 'The deposit of {{deposit}} will be reserved until the proposal is completed',
           replace: {
             deposit: balanceFormat(extraAmount)
           }
-        })}</li>
+        })}</div>
     ];
   }
 }
diff --git a/packages/ui-signer/src/Fees/Transfer.tsx b/packages/ui-signer/src/Fees/Transfer.tsx
index a97f7eb174..6bb79714bf 100644
--- a/packages/ui-signer/src/Fees/Transfer.tsx
+++ b/packages/ui-signer/src/Fees/Transfer.tsx
@@ -10,6 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { Compact } from '@polkadot/types/codec';
 import { withCall, withMulti } from '@polkadot/ui-api/index';
+import { Icon } from '@polkadot/ui-app/index';
 import { balanceFormat } from '@polkadot/ui-reactive/util/index';
 
 import translate from '../translate';
@@ -73,17 +74,17 @@ class Transfer extends React.PureComponent<Props, State> {
 
     return [
       isNoEffect
-        ? <li key='noeffect'>{t('transfer.noeffect', {
+        ? <div key='noeffect'><Icon name='warning sign' />{t('transfer.noeffect', {
           defaultValue: 'The final recipient amount is less than the existential amount, hence the total will be deducted from the sender, however the recipient account will not reflect the amount sent'
-        })}</li>
+        })}</div>
         : undefined,
       isCreation
-        ? <li key='create'>{t('transfer.create', {
+        ? <div key='create'><Icon name='warning sign' />{t('transfer.create', {
           defaultValue: 'A fee of {{creationFee}} will be deducted from the sender since the destination account does not exist',
           replace: {
             creationFee: `${balanceFormat(fees.creationFee)}`
           }
-        })}</li>
+        })}</div>
         : undefined
     ];
   }
diff --git a/packages/ui-signer/src/Fees/index.tsx b/packages/ui-signer/src/Fees/index.tsx
index 0cd0d405ca..41076d4c04 100644
--- a/packages/ui-signer/src/Fees/index.tsx
+++ b/packages/ui-signer/src/Fees/index.tsx
@@ -10,6 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import { Extrinsic, Method } from '@polkadot/types';
 import { withCall, withMulti } from '@polkadot/ui-api/index';
+import { Icon } from '@polkadot/ui-app/index';
 import { balanceFormat } from '@polkadot/ui-reactive/util/index';
 import { compactToU8a } from '@polkadot/util';
 
@@ -136,44 +137,42 @@ class FeeDisplay extends React.PureComponent<Props, State> {
         className={[className, feeClass, 'padded'].join(' ')}
         key='txinfo'
       >
-        <ul>
-          <li>{t('fees', {
-            defaultValue: 'Fees totalling {{fees}} will be applied to the submission',
-            replace: {
-              fees: balanceFormat(allFees)
-            }
-          })}</li>
-          <li>{t('fees.explain', {
-            defaultValue: 'Fees includes the transaction fee and the per-byte fee'
-          })}</li>
-          {this.renderTransfer()}
-          {this.renderProposal()}
-          {
-            isRemovable && hasAvailable
-              ? <li>{t('fees.remove', {
-                defaultValue: 'Submitting this transaction will drop the account balance to below the existential amount, removing the account from the chain state and burning associated funds'
-              })}</li>
-              : undefined
-          }{
-            hasAvailable
-              ? undefined
-              : <li>{t('fees.available', {
-                defaultValue: 'The account does not have the required funds available for this transaction with the current values'
-              })}</li>
-          }{
-            isReserved
-              ? <li>{t('fees.reserved', {
-                defaultValue: 'This account does have a reserved/locked balance, not taken into account'
-              })}</li>
-              : undefined
+        {this.renderTransfer()}
+        {this.renderProposal()}
+        {
+          isRemovable && hasAvailable
+            ? <div><Icon name='warning sign' />{t('fees.remove', {
+              defaultValue: 'Submitting this transaction will drop the account balance to below the existential amount, removing the account from the chain state and burning associated funds'
+            })}</div>
+            : undefined
+        }{
+          hasAvailable
+            ? undefined
+            : <div><Icon name='ban' />{t('fees.available', {
+              defaultValue: 'The account does not have the required funds available for this transaction with the current provided values'
+            })}</div>
+        }{
+          isReserved
+            ? <div><Icon name='arrow right' />{t('fees.reserved', {
+              defaultValue: 'This account does have a reserved/locked balance, not taken into account'
+            })}</div>
+            : undefined
+        }
+        <div><Icon name='arrow right' />{t('fees.explain', {
+          defaultValue: 'Fees includes the transaction fee and the per-byte fee'
+        })}</div>
+        <div><Icon name='arrow right' />{t('fees', {
+          defaultValue: 'Fees totalling {{fees}} will be applied to the submission',
+          replace: {
+            fees: balanceFormat(allFees)
           }
-          <li>{t('total', {
-            defaultValue: '{{total}} total transaction amount (fees + value)',
-            replace: {
-              total: balanceFormat(allTotal)
-            }
-          })}</li>
-        </ul>
+        })}</div>
+        <div><Icon name='arrow right' />{t('total', {
+          defaultValue: '{{total}} total transaction amount (fees + value)',
+          replace: {
+            total: balanceFormat(allTotal)
+          }
+        })}</div>
       </article>
     );
   }