diff --git a/src/components/TransactionConfirmationModal/ConfirmationModalContent.test.tsx b/src/components/TransactionConfirmationModal/ConfirmationModalContent.test.tsx
new file mode 100644
index 0000000000..9b5ed94e52
--- /dev/null
+++ b/src/components/TransactionConfirmationModal/ConfirmationModalContent.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from 'test-utils/render'
+import noop from 'utils/noop'
+
+import { ConfirmationModalContent } from '.'
+
+describe('ConfirmationModalContent', () => {
+  it('should render the L2 icon for optimism', () => {
+    render(
+      <ConfirmationModalContent
+        title="title"
+        onDismiss={noop}
+        topContent={() => <div>topContent</div>}
+        bottomContent={() => <div>bottomContent</div>}
+        headerContent={() => <div data-testid="confirmation-modal-chain-icon">headerContent</div>}
+      />
+    )
+    expect(screen.getByTestId('confirmation-modal-chain-icon')).toBeInTheDocument()
+  })
+
+  it('should not render a chain icon', () => {
+    render(
+      <ConfirmationModalContent
+        title="title"
+        onDismiss={jest.fn()}
+        topContent={() => <div>topContent</div>}
+        bottomContent={() => <div>bottomContent</div>}
+      />
+    )
+    expect(screen.queryByTestId('confirmation-modal-chain-icon')).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/TransactionConfirmationModal/index.tsx b/src/components/TransactionConfirmationModal/index.tsx
index d34df7070b..4ab54a0123 100644
--- a/src/components/TransactionConfirmationModal/index.tsx
+++ b/src/components/TransactionConfirmationModal/index.tsx
@@ -39,7 +39,7 @@ const ConfirmedIcon = styled(ColumnCenter)<{ inline?: boolean }>`
   padding: ${({ inline }) => (inline ? '20px 0' : '32px 0;')};
 `
 
-const StyledLogo = styled.img`
+export const StyledLogo = styled.img`
   height: 16px;
   width: 16px;
   margin-left: 6px;
@@ -173,16 +173,19 @@ export function ConfirmationModalContent({
   bottomContent,
   onDismiss,
   topContent,
+  headerContent,
 }: {
   title: ReactNode
   onDismiss: () => void
   topContent: () => ReactNode
-  bottomContent?: () => ReactNode | undefined
+  bottomContent?: () => ReactNode
+  headerContent?: () => ReactNode
 }) {
   return (
     <Wrapper>
       <AutoColumn gap="sm">
         <Row>
+          {headerContent?.()}
           <Row justify="center" marginLeft="24px">
             <ThemedText.SubHeader>{title}</ThemedText.SubHeader>
           </Row>
diff --git a/src/components/swap/ConfirmSwapModal.tsx b/src/components/swap/ConfirmSwapModal.tsx
index fbca7cd776..7caeec1467 100644
--- a/src/components/swap/ConfirmSwapModal.tsx
+++ b/src/components/swap/ConfirmSwapModal.tsx
@@ -8,18 +8,22 @@ import {
 } from '@uniswap/analytics-events'
 import { Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import Badge from 'components/Badge'
 import Modal, { MODAL_TRANSITION_DURATION } from 'components/Modal'
+import { RowFixed } from 'components/Row'
+import { getChainInfo } from 'constants/chainInfo'
 import { useMaxAmountIn } from 'hooks/useMaxAmountIn'
 import { Allowance, AllowanceState } from 'hooks/usePermit2Allowance'
 import usePrevious from 'hooks/usePrevious'
 import { getPriceUpdateBasisPoints } from 'lib/utils/analytics'
 import { ReactNode, useCallback, useEffect, useState } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
+import { isL2ChainId } from 'utils/chains'
 import { formatSwapPriceUpdatedEventProperties } from 'utils/loggingFormatters'
 import { didUserReject } from 'utils/swapErrorToUserReadableMessage'
 import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
 
-import { ConfirmationModalContent } from '../TransactionConfirmationModal'
+import { ConfirmationModalContent, StyledLogo } from '../TransactionConfirmationModal'
 import {
   ErrorModalContent,
   PendingConfirmModalState,
@@ -173,6 +177,7 @@ export default function ConfirmSwapModal({
   fiatValueInput: { data?: number; isLoading: boolean }
   fiatValueOutput: { data?: number; isLoading: boolean }
 }) {
+  const { chainId } = useWeb3React()
   const doesTradeDiffer = originalTrade && tradeMeaningfullyDiffers(trade, originalTrade, allowedSlippage)
   const { startSwapFlow, onCancel, confirmModalState, approvalError, pendingModalSteps, prepareSwapFlow } =
     useConfirmModalState({
@@ -265,6 +270,21 @@ export default function ConfirmSwapModal({
     startSwapFlow,
   ])
 
+  const l2Badge = () => {
+    if (isL2ChainId(chainId) && confirmModalState !== ConfirmModalState.REVIEWING) {
+      const info = getChainInfo(chainId)
+      return (
+        <Badge>
+          <RowFixed data-testid="confirmation-modal-chain-icon" gap="sm">
+            <StyledLogo src={info.logoUrl} />
+            {info.label}
+          </RowFixed>
+        </Badge>
+      )
+    }
+    return undefined
+  }
+
   return (
     <Trace modal={InterfaceModalName.CONFIRM_SWAP}>
       <Modal isOpen $scrollOverlay onDismiss={onModalDismiss} maxHeight={90}>
@@ -279,6 +299,7 @@ export default function ConfirmSwapModal({
             onDismiss={onModalDismiss}
             topContent={modalHeader}
             bottomContent={modalBottom}
+            headerContent={l2Badge}
           />
         )}
       </Modal>