feat: new chain logos (#7438)

* feat: new consolidated chain logos * test: update snapshots * refactor: simplify border radius formula * fix: pass style prop to portofolio logo container * lint * fix: accessibility * fix: pr nits' * fix: unnused styled component

feat: new chain logos (#7438)
* feat: new consolidated chain logos * test: update snapshots * refactor: simplify border radius formula * fix: pass style prop to portofolio logo container * lint * fix: accessibility * fix: pr nits' * fix: unnused styled component
e16348e2 · cartcrom · GitHub · 45c3e1dc · e16348e2 · e16348e2
Commit e16348e2 authored Oct 10, 2023 by cartcrom Committed by GitHub Oct 10, 2023
52 changed files
--- a/cypress/e2e/token-explore.test.ts
+++ b/cypress/e2e/token-explore.test.ts
@@ -69,6 +69,6 @@ describe('Token explore', () => {
    cy.get(getTestSelector('tokens-network-filter-selected')).click()
    cy.get(getTestSelector('tokens-network-filter-option-optimism')).click()
    cy.get(getTestSelector('tokens-network-filter-selected')).should('contain', 'Optimism')
-    cy.get(getTestSelector('chain-selector-logo')).invoke('attr', 'alt').should('eq', 'Ethereum')
+    cy.get(getTestSelector('chain-selector-logo')).find('title').should('include.text', 'Ethereum logo')
  })
 })
--- a/cypress/e2e/wallet-connection/switch-network.test.ts
+++ b/cypress/e2e/wallet-connection/switch-network.test.ts
@@ -2,7 +2,7 @@ import { createDeferredPromise } from '../../../src/test-utils/promise'
 import { getTestSelector } from '../../utils'

 function waitsForActiveChain(chain: string) {
-  cy.get(getTestSelector('chain-selector-logo')).invoke('attr', 'alt').should('eq', chain)
+  cy.get(getTestSelector('chain-selector-logo')).find('title').should('include.text', `${chain} logo`)
 }

 function switchChain(chain: string) {

--- a/src/assets/images/bnbCircle.svg
+++ b/src/assets/images/bnbCircle.svg
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 2496 2496" style="enable-background:new 0 0 2496 2496;" xml:space="preserve">
-<g>
-	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F0B90B;" d="M1248,0c689.3,0,1248,558.7,1248,1248s-558.7,1248-1248,1248
-		S0,1937.3,0,1248S558.7,0,1248,0L1248,0z"/>
-	<path style="fill:#FFFFFF;" d="M685.9,1248l0.9,330l280.4,165v193.2l-444.5-260.7v-524L685.9,1248L685.9,1248z M685.9,918v192.3
-		l-163.3-96.6V821.4l163.3-96.6l164.1,96.6L685.9,918L685.9,918z M1084.3,821.4l163.3-96.6l164.1,96.6L1247.6,918L1084.3,821.4
-		L1084.3,821.4z"/>
-	<path style="fill:#FFFFFF;" d="M803.9,1509.6v-193.2l163.3,96.6v192.3L803.9,1509.6L803.9,1509.6z M1084.3,1812.2l163.3,96.6
-		l164.1-96.6v192.3l-164.1,96.6l-163.3-96.6V1812.2L1084.3,1812.2z M1645.9,821.4l163.3-96.6l164.1,96.6v192.3l-164.1,96.6V918
-		L1645.9,821.4L1645.9,821.4L1645.9,821.4z M1809.2,1578l0.9-330l163.3-96.6v524l-444.5,260.7v-193.2L1809.2,1578L1809.2,1578
-		L1809.2,1578z"/>
-	<polygon style="fill:#FFFFFF;" points="1692.1,1509.6 1528.8,1605.3 1528.8,1413 1692.1,1316.4 1692.1,1509.6 	"/>
-	<path style="fill:#FFFFFF;" d="M1692.1,986.4l0.9,193.2l-281.2,165v330.8l-163.3,95.7l-163.3-95.7v-330.8l-281.2-165V986.4
-		L968,889.8l279.5,165.8l281.2-165.8l164.1,96.6H1692.1L1692.1,986.4z M803.9,656.5l443.7-261.6l444.5,261.6l-163.3,96.6
-		l-281.2-165.8L967.2,753.1L803.9,656.5L803.9,656.5z"/>
-</g>
-</svg>
--- a/src/assets/images/celoCircle.png
+++ b/src/assets/images/celoCircle.png
--- a/src/assets/images/polygonCircle.png
+++ b/src/assets/images/polygonCircle.png
--- a/src/assets/svg/arbitrum_logo.svg
+++ b/src/assets/svg/arbitrum_logo.svg
-<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.53125 5.04465V10.9554C0.53125 11.3328 0.742546 11.6817 1.08477 11.8698L6.44755 14.8258C6.78977 15.0139 7.21107 15.0139 7.55329 14.8258L12.9161 11.8698C13.2583 11.6817 13.4696 11.3328 13.4696 10.9554V5.04465C13.4696 4.66726 13.2583 4.31833 12.9161 4.13026L7.55329 1.17426C7.21107 0.986184 6.78977 0.986184 6.44755 1.17426L1.08347 4.13026C0.74125 4.31833 0.53125 4.66726 0.53125 5.04465Z" fill="#213147"/>
-<path d="M8.17051 9.14643L7.40569 11.1484C7.38495 11.2041 7.38495 11.2648 7.40569 11.3204L8.72143 14.7652L10.2433 13.9263L8.4168 9.14643C8.37532 9.03631 8.21199 9.03631 8.17051 9.14643Z" fill="#12AAFF"/>
-<path d="M9.70391 5.77961C9.66243 5.66949 9.4991 5.66949 9.45762 5.77961L8.6928 7.78162C8.67206 7.83731 8.67206 7.89793 8.6928 7.95361L10.8485 13.5934L12.3704 12.7545L9.70391 5.77961Z" fill="#12AAFF"/>
-<path d="M7 1.39574C7.03759 1.39574 7.07519 1.40564 7.10889 1.42296L12.9124 4.62147C12.9798 4.65859 13.0213 4.72789 13.0213 4.80089V11.1967C13.0213 11.2709 12.9798 11.339 12.9124 11.3761L7.10889 14.5746C7.07648 14.5932 7.03759 14.6018 7 14.6018C6.96241 14.6018 6.92482 14.5919 6.89111 14.5746L1.08759 11.3786C1.02019 11.3415 0.978704 11.2722 0.978704 11.1992V4.80213C0.978704 4.72789 1.02019 4.65983 1.08759 4.62271L6.89111 1.4242C6.92482 1.40564 6.96241 1.39574 7 1.39574ZM7 0.461548C6.79389 0.461548 6.58648 0.512279 6.40111 0.614978L0.598889 3.81226C0.228148 4.01642 0 4.3938 0 4.80213V11.1979C0 11.6062 0.228148 11.9836 0.598889 12.1878L6.40241 15.3863C6.58778 15.4878 6.79389 15.5397 7.0013 15.5397C7.20741 15.5397 7.41482 15.489 7.60019 15.3863L13.4037 12.1878C13.7744 11.9836 14.0026 11.6062 14.0026 11.1979V4.80213C14.0026 4.3938 13.7744 4.01642 13.4037 3.81226L7.59889 0.614978C7.41352 0.512279 7.20611 0.461548 7 0.461548Z" fill="#9DCCED"/>
-<path d="M3.16162 13.6008L3.6957 12.2051L4.77033 13.0576L3.7657 13.9336L3.16162 13.6008Z" fill="#213147"/>
-<path d="M6.51113 4.3443H5.03983C4.92965 4.3443 4.83113 4.40988 4.79354 4.50887L1.63965 12.7619L3.1615 13.6008L6.63428 4.51258C6.66669 4.43091 6.60317 4.3443 6.51113 4.3443Z" fill="white"/>
-<path d="M9.08579 4.3443H7.6145C7.50431 4.3443 7.40579 4.40988 7.3682 4.50887L3.76709 13.9324L5.28894 14.7713L9.20894 4.51258C9.24005 4.43091 9.17653 4.3443 9.08579 4.3443Z" fill="white"/>
-</svg>
--- a/src/assets/svg/avax_square_logo.svg
+++ b/src/assets/svg/avax_square_logo.svg
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_298_130193)">
-<path d="M12.9346 2.74121H3.05566V11.7259H12.9346V2.74121Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9998 0C15.9998 4.41538 15.9998 15.9947 15.9998 15.9947C11.5844 15.9947 0.00590861 15.9947 0.00590861 15.9947L0.00488281 5.43594e-05C4.42027 5.43594e-05 15.9998 0 15.9998 0ZM5.73493 11.1815H4.18339C3.85736 11.1815 3.69632 11.1815 3.59813 11.1187C3.49207 11.0499 3.42726 10.936 3.4194 10.8103C3.41351 10.6945 3.49404 10.553 3.65508 10.2702L7.48603 3.51765C7.64905 3.2309 7.73153 3.08753 7.83562 3.03451C7.94756 2.97755 8.08112 2.97755 8.19307 3.03451C8.29716 3.08753 8.37965 3.2309 8.54265 3.51765L9.33022 4.89243L9.33423 4.89945C9.51029 5.20707 9.59958 5.36307 9.63856 5.52679C9.68176 5.70552 9.68176 5.89406 9.63856 6.07278C9.59928 6.23775 9.5109 6.39488 9.33218 6.70715L7.31987 10.2643L7.31466 10.2734C7.13744 10.5836 7.04762 10.7408 6.92315 10.8594C6.78763 10.9891 6.62462 11.0833 6.44589 11.1364C6.28288 11.1815 6.10024 11.1815 5.73493 11.1815ZM9.65309 11.1815H11.8763C12.2043 11.1815 12.3693 11.1815 12.4675 11.1168C12.5735 11.048 12.6403 10.9321 12.6463 10.8065C12.6519 10.6944 12.5731 10.5584 12.4188 10.2921C12.4134 10.283 12.4081 10.2738 12.4027 10.2644L11.2891 8.35932L11.2764 8.33787C11.1199 8.07325 11.0409 7.93962 10.9395 7.88797C10.8276 7.831 10.6959 7.831 10.584 7.88797C10.4819 7.94099 10.3994 8.08044 10.2364 8.36128L9.12674 10.2663L9.12294 10.2729C8.9605 10.5533 8.87932 10.6934 8.88518 10.8084C8.89303 10.9341 8.95784 11.0499 9.06389 11.1187C9.16014 11.1815 9.32511 11.1815 9.65309 11.1815Z" fill="#E84142"/>
-</g>
-<defs>
-<clipPath id="clip0_298_130193">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/assets/svg/base_logo.svg
+++ b/src/assets/svg/base_logo.svg
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 14C0 6.26801 6.26801 0 14 0V0C21.732 0 28 6.26801 28 14V14C28 21.732 21.732 28 14 28V28C6.26801 28 0 21.732 0 14V14Z" fill="#0052FF"/>
-<g clip-path="url(#clip0_13924_33076)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3332 14.0003C23.3332 19.155 19.1472 23.3337 13.9836 23.3337C9.08459 23.3337 5.06565 19.5724 4.6665 14.7849H17.0245V13.2158H4.6665C5.06565 8.42825 9.08459 4.66699 13.9836 4.66699C19.1472 4.66699 23.3332 8.84566 23.3332 14.0003Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_13924_33076">
-<rect width="18.6667" height="18.6667" fill="white" transform="translate(4.66675 4.66699)"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/assets/svg/base_square_logo.svg
+++ b/src/assets/svg/base_square_logo.svg
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="28" height="28" rx="8" fill="#0052FF"/>
-<g clip-path="url(#clip0_13921_13252)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3332 14.0003C23.3332 19.155 19.1472 23.3337 13.9836 23.3337C9.08459 23.3337 5.06565 19.5724 4.6665 14.7849H17.0245V13.2158H4.6665C5.06565 8.42825 9.08459 4.66699 13.9836 4.66699C19.1472 4.66699 23.3332 8.84566 23.3332 14.0003Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_13921_13252">
-<rect width="18.6667" height="18.6667" fill="white" transform="translate(4.66675 4.66699)"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/assets/svg/bnb_square_logo.svg
+++ b/src/assets/svg/bnb_square_logo.svg
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect x="0" y="0" width="16" height="16" rx="3" fill="#F0B90B"/>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 2496 2496" style="enable-background:new 0 0 2496 2496;" xml:space="preserve">
-<g>
-	<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#F0B90B;" d="M1248,0c689.3,0,1248,558.7,1248,1248s-558.7,1248-1248,1248
-		S0,1937.3,0,1248S558.7,0,1248,0L1248,0z"/>
-	<path style="fill:#FFFFFF;" d="M685.9,1248l0.9,330l280.4,165v193.2l-444.5-260.7v-524L685.9,1248L685.9,1248z M685.9,918v192.3
-		l-163.3-96.6V821.4l163.3-96.6l164.1,96.6L685.9,918L685.9,918z M1084.3,821.4l163.3-96.6l164.1,96.6L1247.6,918L1084.3,821.4
-		L1084.3,821.4z"/>
-	<path style="fill:#FFFFFF;" d="M803.9,1509.6v-193.2l163.3,96.6v192.3L803.9,1509.6L803.9,1509.6z M1084.3,1812.2l163.3,96.6
-		l164.1-96.6v192.3l-164.1,96.6l-163.3-96.6V1812.2L1084.3,1812.2z M1645.9,821.4l163.3-96.6l164.1,96.6v192.3l-164.1,96.6V918
-		L1645.9,821.4L1645.9,821.4L1645.9,821.4z M1809.2,1578l0.9-330l163.3-96.6v524l-444.5,260.7v-193.2L1809.2,1578L1809.2,1578
-		L1809.2,1578z"/>
-	<polygon style="fill:#FFFFFF;" points="1692.1,1509.6 1528.8,1605.3 1528.8,1413 1692.1,1316.4 1692.1,1509.6 	"/>
-	<path style="fill:#FFFFFF;" d="M1692.1,986.4l0.9,193.2l-281.2,165v330.8l-163.3,95.7l-163.3-95.7v-330.8l-281.2-165V986.4
-		L968,889.8l279.5,165.8l281.2-165.8l164.1,96.6H1692.1L1692.1,986.4z M803.9,656.5l443.7-261.6l444.5,261.6l-163.3,96.6
-		l-281.2-165.8L967.2,753.1L803.9,656.5L803.9,656.5z"/>
-</g>
-</svg>
-</svg>
--- a/src/assets/svg/celo_square_logo.svg
+++ b/src/assets/svg/celo_square_logo.svg
-<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect width="250" height="250" rx="40" fill="#FCFF52"/>
-<path style="fill:black;" d="M188.9,60.7H60.7v128.2h128.2v-44.8h-21.3c-7.3,16.3-23.8,27.7-42.7,27.7c-26,0-47.1-21.3-47.1-47.1c0-25.9,21.1-47,47.1-47
-	c19.3,0,35.8,11.7,43.1,28.4h20.9V60.7z"/>
-</svg>
--- a/src/assets/svg/ethereum_square_logo.svg
+++ b/src/assets/svg/ethereum_square_logo.svg
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect x="0" y="0" width="16" height="16" rx="3" fill="#627EEA"/>
-<circle cx="8" cy="8" r="8"/>
-<g clip-path="url(#clip0_12246_121533)">
-<circle cx="8" cy="8" r="8" fill="url(#pattern0)"/>
-</g>
-<defs>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_12246_121533" transform="scale(0.0078125)"/>
-</pattern>
-<clipPath id="clip0_12246_121533">
-<rect x="0" y="0" width="16" height="16" rx="8" fill="white"/>
-</clipPath>
-<image id="image0_12246_121533" width="128" height="128" xlink:href="data:image/png;base64,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"/>
-</defs>
-</svg>
--- a/src/assets/svg/optimism_square_logo.svg
+++ b/src/assets/svg/optimism_square_logo.svg
--- a/src/assets/svg/optimistic_ethereum.svg
+++ b/src/assets/svg/optimistic_ethereum.svg
-<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="250" cy="250" r="250" fill="#FF0420"/>
-<path d="M177.133 316.446C162.247 316.446 150.051 312.943 140.544 305.938C131.162 298.808 126.471 288.676 126.471 275.541C126.471 272.789 126.784 269.411 127.409 265.408C129.036 256.402 131.35 245.581 134.352 232.947C142.858 198.547 164.812 181.347 200.213 181.347C209.845 181.347 218.476 182.973 226.107 186.225C233.738 189.352 239.742 194.106 244.12 200.486C248.498 206.74 250.688 214.246 250.688 223.002C250.688 225.629 250.375 228.944 249.749 232.947C247.873 244.08 245.621 254.901 242.994 265.408C238.616 282.546 231.048 295.368 220.29 303.874C209.532 312.255 195.147 316.446 177.133 316.446ZM179.76 289.426C186.766 289.426 192.707 287.362 197.586 283.234C202.59 279.106 206.155 272.789 208.281 264.283C211.158 252.524 213.348 242.266 214.849 233.51C215.349 230.883 215.599 228.194 215.599 225.441C215.599 214.058 209.657 208.366 197.774 208.366C190.768 208.366 184.764 210.43 179.76 214.558C174.882 218.687 171.379 225.004 169.253 233.51C167.001 241.891 164.749 252.149 162.498 264.283C161.997 266.784 161.747 269.411 161.747 272.163C161.747 283.672 167.752 289.426 179.76 289.426Z" fill="white"/>
-<path d="M259.303 314.57C257.927 314.57 256.863 314.132 256.113 313.256C255.487 312.255 255.3 311.13 255.55 309.879L281.444 187.914C281.694 186.538 282.382 185.412 283.508 184.536C284.634 183.661 285.822 183.223 287.073 183.223H336.985C350.87 183.223 362.003 186.1 370.384 191.854C378.891 197.609 383.144 205.927 383.144 216.81C383.144 219.937 382.769 223.19 382.018 226.567C378.891 240.953 372.574 251.586 363.067 258.466C353.685 265.346 340.8 268.786 324.413 268.786H299.082L290.451 309.879C290.2 311.255 289.512 312.38 288.387 313.256C287.261 314.132 286.072 314.57 284.822 314.57H259.303ZM325.727 242.892C330.98 242.892 335.546 241.453 339.424 238.576C343.427 235.699 346.054 231.571 347.305 226.192C347.68 224.065 347.868 222.189 347.868 220.563C347.868 216.935 346.805 214.183 344.678 212.307C342.551 210.305 338.924 209.305 333.795 209.305H311.278L304.148 242.892H325.727Z" fill="white"/>
-</svg>
--- a/src/assets/svg/polygon-matic-logo.svg
+++ b/src/assets/svg/polygon-matic-logo.svg
-<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="54.83" y1="392.31" x2="459.03" y2="97.58" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a726c1"/><stop offset=".88" stop-color="#803bdf"/><stop offset="1" stop-color="#7b3fe4"/></linearGradient></defs><path class="cls-1" d="m364.03,335.08l111.55-64.4c5.9-3.41,9.57-9.76,9.57-16.58V125.28c0-6.81-3.67-13.17-9.57-16.58l-111.55-64.4c-5.9-3.41-13.24-3.4-19.14,0l-111.55,64.4c-5.9,3.41-9.57,9.76-9.57,16.58v230.19l-78.22,45.15-78.22-45.15v-90.33l78.22-45.15,51.6,29.78v-60.59l-42.03-24.26c-2.9-1.67-6.21-2.55-9.57-2.55s-6.67.88-9.57,2.55L24.42,229.33c-5.9,3.41-9.57,9.76-9.57,16.58v128.81c0,6.81,3.67,13.17,9.57,16.58l111.55,64.41c5.9,3.4,13.23,3.4,19.14,0l111.55-64.4c5.9-3.41,9.57-9.77,9.57-16.58v-230.19l1.41-.81,76.81-44.34,78.22,45.16v90.32l-78.22,45.16-51.52-29.74v60.59l41.95,24.23c5.9,3.4,13.24,3.4,19.14,0Z"/></svg>
\ No newline at end of file
--- a/src/assets/svg/polygon_square_logo.svg
+++ b/src/assets/svg/polygon_square_logo.svg
-<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-116.09" y1="25.97" x2="437.45" y2="364.71" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a229c5"/><stop offset="1" stop-color="#7b3fe4"/></linearGradient></defs><rect class="cls-2" x="-18.1" y="-18.1" width="536.2" height="536.2"/><path class="cls-1" d="m320.83,302.85l69.29-40.01c3.67-2.12,5.94-6.06,5.94-10.3v-80.01c0-4.23-2.28-8.18-5.94-10.3l-69.29-40.01c-3.67-2.12-8.22-2.11-11.89,0l-69.29,40.01c-3.67,2.12-5.94,6.07-5.94,10.3v142.99l-48.59,28.05-48.59-28.05v-56.11l48.59-28.05,32.05,18.5v-37.64l-26.11-15.07c-1.8-1.04-3.86-1.59-5.95-1.59s-4.15.55-5.94,1.59l-69.29,40.01c-3.67,2.12-5.94,6.06-5.94,10.3v80.01c0,4.23,2.28,8.18,5.94,10.3l69.29,40.01c3.66,2.11,8.22,2.11,11.89,0l69.29-40c3.67-2.12,5.94-6.07,5.94-10.3v-142.99l.88-.5,47.71-27.55,48.59,28.05v56.11l-48.59,28.05-32-18.48v37.64l26.06,15.05c3.67,2.11,8.22,2.11,11.89,0Z"/></svg>
\ No newline at end of file
--- a/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
+++ b/src/components/AccountDrawer/MiniPortfolio/PortfolioLogo.tsx
@@ -2,8 +2,8 @@ import { ChainId, Currency } from '@uniswap/sdk-core'
 import blankTokenUrl from 'assets/svg/blank_token.svg'
 import { ReactComponent as UnknownStatus } from 'assets/svg/contract-interaction.svg'
 import { MissingImageLogo } from 'components/Logo/AssetLogo'
+import { ChainLogo, getDefaultBorderRadius } from 'components/Logo/ChainLogo'
 import { Unicon } from 'components/Unicon'
-import { getChainInfo } from 'constants/chainInfo'
 import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import useENSAvatar from 'hooks/useENSAvatar'
 import React from 'react'
@@ -48,25 +48,14 @@ const ENSAvatarImg = styled.img`
  width: 40px;
 `

-const StyledChainLogo = styled.img`
-  height: 14px;
-  width: 14px;
-`
-
-const SquareChainLogo = styled.img`
-  height: 100%;
-  width: 100%;
-`
-
 const CircleLogoImage = styled.img<{ size: string }>`
  width: ${({ size }) => size};
  height: ${({ size }) => size};
  border-radius: 50%;
 `

-const L2LogoContainer = styled.div<{ hasSquareLogo?: boolean }>`
-  background-color: ${({ theme, hasSquareLogo }) => (hasSquareLogo ? theme.surface2 : theme.neutral1)};
-  border-radius: 2px;
+const L2LogoContainer = styled.div`
+  border-radius: ${getDefaultBorderRadius(16)}px;
  height: 16px;
  left: 60%;
  position: absolute;
@@ -152,27 +141,21 @@ interface PortfolioLogoProps {

 function SquareL2Logo({ chainId }: { chainId: ChainId }) {
  if (chainId === ChainId.MAINNET) return null
-  const { squareLogoUrl, logoUrl } = getChainInfo(chainId)
-
-  const chainLogo = squareLogoUrl ?? logoUrl

  return (
-    <L2LogoContainer hasSquareLogo={!!squareLogoUrl}>
-      {squareLogoUrl ? (
-        <SquareChainLogo src={chainLogo} alt="chainLogo" />
-      ) : (
-        <StyledChainLogo src={chainLogo} alt="chainLogo" />
-      )}
+    <L2LogoContainer>
+      <ChainLogo chainId={chainId} />
    </L2LogoContainer>
  )
 }

+// TODO(WEB-2983)
 /**
 * Renders an image by prioritizing a list of sources, and then eventually a fallback contract icon
 */
 export function PortfolioLogo(props: PortfolioLogoProps) {
  return (
-    <StyledLogoParentContainer>
+    <StyledLogoParentContainer style={props.style}>
      {getLogo(props)}
      <SquareL2Logo chainId={props.chainId} />
    </StyledLogoParentContainer>

--- a/src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap
+++ b/src/components/AccountDrawer/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap
@@ -37,11 +37,6 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
  left: 0;
 }

-.c4 {
-  height: 14px;
-  width: 14px;
-}
-
 .c2 {
  width: 40px;
  height: 40px;
@@ -49,8 +44,7 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
 }

 .c3 {
-  background-color: #222222;
-  border-radius: 2px;
+  border-radius: 4px;
  height: 16px;
  left: 60%;
  position: absolute;
@@ -90,11 +84,35 @@ exports[`PortfolioLogo renders with L2 icon 1`] = `
    <div
      class="c3"
    >
-      <img
-        alt="chainLogo"
-        class="c4"
-        src="arbitrum_logo.svg"
-      />
+      <svg
+        aria-labelledby="titleID"
+        height="16"
+        width="16"
+      >
+        <title
+          id="titleID"
+        >
+          Arbitrum logo
+        </title>
+        <rect
+          fill="#F9F9F9"
+          height="16"
+          rx="4"
+          width="16"
+        />
+        <rect
+          fill="#00A3FF33"
+          height="16"
+          rx="4"
+          width="16"
+        />
+        <svg
+          height="16"
+          width="16"
+        >
+          arbitrum.svg
+        </svg>
+      </svg>
    </div>
  </div>
 </div>

--- a/src/components/DoubleLogo/index.tsx
+++ b/src/components/DoubleLogo/index.tsx
@@ -35,12 +35,12 @@ export default function DoubleCurrencyLogo({
    <Wrapper sizeraw={size} margin={margin}>
      {currency0 && (
        <HigherLogoWrapper>
-          <CurrencyLogo hideL2Icon currency={currency0} size={size.toString() + 'px'} />
+          <CurrencyLogo currency={currency0} size={`${size}px`} />
        </HigherLogoWrapper>
      )}
      {currency1 && (
        <CoveredLogoWapper sizeraw={size}>
-          <CurrencyLogo hideL2Icon currency={currency1} size={size.toString() + 'px'} />
+          <CurrencyLogo currency={currency1} size={`${size}px`} />
        </CoveredLogoWapper>
      )}
    </Wrapper>

--- a/src/components/Logo/AssetLogo.tsx
+++ b/src/components/Logo/AssetLogo.tsx
 import { ChainId } from '@uniswap/sdk-core'
-import { getChainInfo } from 'constants/chainInfo'
 import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import React, { useState } from 'react'
 import styled from 'styled-components'
@@ -42,7 +41,6 @@ export type AssetLogoBaseProps = {
  backupImg?: string | null
  size?: string
  style?: React.CSSProperties
-  hideL2Icon?: boolean
 }
 type AssetLogoProps = AssetLogoBaseProps & { isNative?: boolean; address?: string | null; chainId?: number }

@@ -51,19 +49,6 @@ const LogoContainer = styled.div`
  display: flex;
 `

-const L2NetworkLogo = styled.div<{ networkUrl?: string; parentSize: string }>`
-  --size: ${({ parentSize }) => `calc(${parentSize} / 2)`};
-  width: var(--size);
-  height: var(--size);
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  background: url(${({ networkUrl }) => networkUrl});
-  background-repeat: no-repeat;
-  background-size: ${({ parentSize }) => `calc(${parentSize} / 2) calc(${parentSize} / 2)`};
-  display: ${({ networkUrl }) => !networkUrl && 'none'};
-`
-
 /**
 * Renders an image by prioritizing a list of sources, and then eventually a fallback triangle alert
 */
@@ -75,10 +60,8 @@ export default function AssetLogo({
  backupImg,
  size = '24px',
  style,
-  hideL2Icon = false,
 }: AssetLogoProps) {
  const [src, nextSrc] = useTokenLogoSource(address, chainId, isNative, backupImg)
-  const L2Icon = getChainInfo(chainId)?.circleLogoUrl
  const [imgLoaded, setImgLoaded] = useState(() => {
    const img = document.createElement('img')
    img.src = src ?? ''
@@ -104,7 +87,6 @@ export default function AssetLogo({
          {symbol?.toUpperCase().replace('$', '').replace(/\s+/g, '').slice(0, 3)}
        </MissingImageLogo>
      )}
-      {!hideL2Icon && <L2NetworkLogo networkUrl={L2Icon} parentSize={size} />}
    </LogoContainer>
  )
 }
--- a/src/components/Logo/ChainLogo.tsx
+++ b/src/components/Logo/ChainLogo.tsx
+import { ChainId } from '@uniswap/sdk-core'
+import { getChainInfo } from 'constants/chainInfo'
+import { isSupportedChain, SupportedInterfaceChain } from 'constants/chains'
+import { CSSProperties, FunctionComponent } from 'react'
+import { useTheme } from 'styled-components'
+import { useIsDarkMode } from 'theme/components/ThemeToggle'
+
+import { ReactComponent as arbitrum } from './ChainSymbols/arbitrum.svg'
+import { ReactComponent as avax } from './ChainSymbols/avax.svg'
+import { ReactComponent as base } from './ChainSymbols/base.svg'
+import { ReactComponent as bnb } from './ChainSymbols/bnb.svg'
+import { ReactComponent as celo } from './ChainSymbols/celo.svg'
+import { ReactComponent as celoLight } from './ChainSymbols/celo_light.svg'
+import { ReactComponent as ethereum } from './ChainSymbols/ethereum.svg'
+import { ReactComponent as optimism } from './ChainSymbols/optimism.svg'
+import { ReactComponent as polygon } from './ChainSymbols/polygon.svg'
+
+type SVG = FunctionComponent<React.SVGProps<SVGSVGElement>>
+type ChainUI = { Symbol: SVG; bgColor: string; textColor: string }
+
+export function getChainUI(chainId: SupportedInterfaceChain, darkMode: boolean): ChainUI
+export function getChainUI(chainId: ChainId, darkMode: boolean): ChainUI | undefined {
+  switch (chainId) {
+    case ChainId.MAINNET:
+    case ChainId.GOERLI:
+    case ChainId.SEPOLIA:
+      return {
+        Symbol: ethereum,
+        bgColor: '#6B8AFF33',
+        textColor: '#6B8AFF',
+      }
+    case ChainId.POLYGON:
+    case ChainId.POLYGON_MUMBAI:
+      return {
+        Symbol: polygon,
+        bgColor: '#9558FF33',
+        textColor: '#9558FF',
+      }
+    case ChainId.ARBITRUM_ONE:
+    case ChainId.ARBITRUM_GOERLI:
+      return {
+        Symbol: arbitrum,
+        bgColor: '#00A3FF33',
+        textColor: '#00A3FF',
+      }
+    case ChainId.OPTIMISM:
+    case ChainId.OPTIMISM_GOERLI:
+      return {
+        Symbol: optimism,
+        bgColor: '#FF042033',
+        textColor: '#FF0420',
+      }
+    case ChainId.CELO:
+    case ChainId.CELO_ALFAJORES:
+      return darkMode
+        ? {
+            Symbol: celo,
+            bgColor: '#FCFF5233',
+            textColor: '#FCFF52',
+          }
+        : {
+            Symbol: celoLight,
+            bgColor: '#FCFF5299',
+            textColor: '#655947',
+          }
+    case ChainId.AVALANCHE:
+      return {
+        Symbol: avax,
+        bgColor: '#E8414233',
+        textColor: '#E84142',
+      }
+    case ChainId.BNB:
+      return {
+        Symbol: bnb,
+        bgColor: '#EAB20033',
+        textColor: '#EAB200',
+      }
+    case ChainId.BASE:
+      return {
+        Symbol: base,
+        bgColor: '#0052FF33',
+        textColor: '#0052FF',
+      }
+    default:
+      return undefined
+  }
+}
+
+export const getDefaultBorderRadius = (size: number) => size / 2 - 4
+
+type ChainLogoProps = {
+  chainId: ChainId
+  className?: string
+  size?: number
+  borderRadius?: number
+  style?: CSSProperties
+  testId?: string
+}
+export function ChainLogo({
+  chainId,
+  className,
+  style,
+  size = 16,
+  borderRadius = getDefaultBorderRadius(size),
+  testId,
+}: ChainLogoProps) {
+  const darkMode = useIsDarkMode()
+  const { surface2 } = useTheme()
+
+  if (!isSupportedChain(chainId)) return null
+  const { label } = getChainInfo(chainId)
+
+  const { Symbol, bgColor } = getChainUI(chainId, darkMode)
+  return (
+    <svg width={size} height={size} className={className} style={style} aria-labelledby="titleID" data-testid={testId}>
+      <title id="titleID">{`${label} logo`}</title>
+      <rect rx={borderRadius} fill={surface2} width={size} height={size} />
+      <rect rx={borderRadius} fill={bgColor} width={size} height={size} />
+      <Symbol width={size} height={size} />
+    </svg>
+  )
+}
--- a/src/components/Logo/ChainSymbols/arbitrum.svg
+++ b/src/components/Logo/ChainSymbols/arbitrum.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.9">
+<path d="M13.2427 13.2169L12.4311 15.3416C12.409 15.4007 12.409 15.465 12.4311 15.5241L13.8274 19.1799L15.4425 18.2896L13.5041 13.2169C13.4601 13.1001 13.2867 13.1001 13.2427 13.2169Z" fill="#00A3FF"/>
+<path d="M14.8703 9.6438C14.8263 9.52694 14.653 9.52694 14.6089 9.6438L13.7973 11.7685C13.7753 11.8275 13.7753 11.8919 13.7973 11.951L16.0851 17.9362L17.7001 17.0459L14.8703 9.6438Z" fill="#00A3FF"/>
+<path d="M12.0006 4.99142C12.0405 4.99142 12.0804 5.00192 12.1161 5.0203L18.2752 8.41475C18.3467 8.45415 18.3907 8.52768 18.3907 8.60516V15.3927C18.3907 15.4715 18.3467 15.5437 18.2752 15.5831L12.1161 18.9776C12.0817 18.9973 12.0405 19.0065 12.0006 19.0065C11.9607 19.0065 11.9208 18.996 11.885 18.9776L5.72599 15.5858C5.65446 15.5464 5.61043 15.4728 5.61043 15.3954V8.60647C5.61043 8.52768 5.65446 8.45546 5.72599 8.41607L11.885 5.02162C11.9208 5.00192 11.9607 4.99142 12.0006 4.99142ZM12.0006 4C11.7818 4 11.5617 4.05384 11.365 4.16283L5.20735 7.55596C4.8139 7.77263 4.57178 8.17314 4.57178 8.60647V15.3941C4.57178 15.8274 4.8139 16.2279 5.20735 16.4446L11.3664 19.839C11.5631 19.9467 11.7818 20.0018 12.002 20.0018C12.2207 20.0018 12.4408 19.948 12.6375 19.839L18.7966 16.4446C19.19 16.2279 19.4321 15.8274 19.4321 15.3941V8.60647C19.4321 8.17314 19.19 7.77263 18.7966 7.55596L12.6362 4.16283C12.4394 4.05384 12.2193 4 12.0006 4Z" fill="#00A3FF"/>
+<path d="M11.4819 8.12061H9.92048C9.80355 8.12061 9.69899 8.1902 9.6591 8.29525L6.31201 17.0538L7.92709 17.9441L11.6126 8.29919C11.647 8.21252 11.5796 8.12061 11.4819 8.12061Z" fill="#00A3FF"/>
+<path d="M14.2143 8.12061H12.6529C12.536 8.12061 12.4314 8.1902 12.3915 8.29525L8.56982 18.2961L10.1849 19.1864L14.345 8.29919C14.378 8.21252 14.3106 8.12061 14.2143 8.12061Z" fill="#00A3FF"/>
+</g>
+</svg>
--- a/src/components/Logo/ChainSymbols/avax.svg
+++ b/src/components/Logo/ChainSymbols/avax.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2121_13838)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.33367 18.0688H5.8578C5.33754 18.0688 5.08056 18.0688 4.92387 17.9685C4.75462 17.8588 4.6512 17.677 4.63867 17.4764C4.62925 17.2916 4.75776 17.0659 5.01475 16.6146L11.128 5.83913C11.3881 5.38156 11.5197 5.15278 11.6858 5.06816C11.8645 4.97728 12.0776 4.97728 12.2562 5.06816C12.4223 5.15278 12.554 5.38156 12.8141 5.83913L14.0709 8.03295L14.0773 8.04415C14.3582 8.53503 14.5007 8.78396 14.5629 9.04523C14.6318 9.33043 14.6318 9.63129 14.5629 9.9165C14.5002 10.1797 14.3592 10.4305 14.074 10.9288L10.8628 16.6052L10.8545 16.6197C10.5717 17.1146 10.4284 17.3655 10.2298 17.5547C10.0135 17.7616 9.75339 17.912 9.46819 17.9967C9.20807 18.0688 8.91661 18.0688 8.33367 18.0688ZM14.5861 18.0688H18.1337C18.6571 18.0688 18.9204 18.0688 19.0772 17.9655C19.2464 17.8558 19.3529 17.6708 19.3624 17.4703C19.3714 17.2914 19.2457 17.0745 18.9994 16.6494C18.9909 16.635 18.9824 16.6202 18.9738 16.6052L17.1967 13.5652L17.1765 13.531C16.9268 13.1087 16.8007 12.8955 16.6388 12.8131C16.4603 12.7222 16.2502 12.7222 16.0716 12.8131C15.9086 12.8977 15.777 13.1202 15.5169 13.5684L13.7462 16.6084L13.7401 16.6188C13.4809 17.0663 13.3513 17.2899 13.3607 17.4734C13.3732 17.674 13.4766 17.8588 13.6459 17.9685C13.7994 18.0688 14.0627 18.0688 14.5861 18.0688Z" fill="#E84142"/>
+</g>
+<defs>
+<clipPath id="clip0_2121_13838">
+<rect width="24" height="24" rx="8" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/Logo/ChainSymbols/base.svg
+++ b/src/components/Logo/ChainSymbols/base.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 12C20 16.4183 16.412 20 11.986 20C7.78693 20 4.34212 16.7761 4 12.6725H14.5926V11.3275H4C4.34212 7.22393 7.78693 4 11.986 4C16.412 4 20 7.58171 20 12Z" fill="#0052FF"/>
+</svg>
--- a/src/components/Logo/ChainSymbols/bnb.svg
+++ b/src/components/Logo/ChainSymbols/bnb.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.279 11.3421L16.2704 9.48437H16.2771L14.6992 8.55553L11.9954 10.1498L9.30786 8.55553L7.73094 9.48437V11.3421L10.4348 12.9286V16.1094L12.005 17.0296L13.5752 16.1094V12.9286L16.279 11.3421ZM11.9963 3.79688L7.72998 6.31226L9.30017 7.24111L11.9963 5.64687L14.7002 7.24111L16.2704 6.31226L11.9963 3.79688ZM6.60375 15.1726L6.5951 11.9995L5.02586 11.0716V16.1101L9.2999 18.6168V16.7591L6.60375 15.1726ZM6.5951 10.6755V8.82644L8.17298 7.8976L6.5951 6.96875L5.0249 7.8976V9.74663L6.5951 10.6755ZM11.9961 6.96875L10.4259 7.8976L11.9961 8.82644L13.5739 7.8976L11.9961 6.96875ZM9.29968 13.5861L7.72949 12.6572V14.5149L9.29968 15.4351V13.5861ZM11.9958 18.3534L10.4256 17.4245V19.2736L11.9958 20.2024L13.5737 19.2736V17.4245L11.9958 18.3534ZM17.3958 6.96875L15.8256 7.8976L17.3958 8.82644V10.6755L18.9737 9.74663V7.8976L17.3958 6.96875ZM18.9747 11.0707L17.4045 11.9995L17.3958 15.1726L14.7006 16.7582V18.6159L18.9747 16.1091V11.0707ZM16.2699 14.5149L14.6997 15.4351V13.5861L16.2699 12.6572V14.5149Z" fill="#EAB200"/>
+</svg>
--- a/src/components/Logo/ChainSymbols/celo.svg
+++ b/src/components/Logo/ChainSymbols/celo.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9844 5.95312H6.01562V17.9219H17.9844V13.7438H15.9969C15.3125 15.2688 13.7719 16.3281 12.0094 16.3281C9.57812 16.3281 7.60938 14.3406 7.60938 11.9281C7.60625 9.51563 9.57812 7.54688 12.0094 7.54688C13.8063 7.54688 15.3469 8.64062 16.0312 10.2H17.9844V5.95312Z" fill="#FCFF52"/>
+</svg>
--- a/src/components/Logo/ChainSymbols/celo_light.svg
+++ b/src/components/Logo/ChainSymbols/celo_light.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9844 5.95312H6.01562V17.9219H17.9844V13.7438H15.9969C15.3125 15.2688 13.7719 16.3281 12.0094 16.3281C9.57812 16.3281 7.60938 14.3406 7.60938 11.9281C7.60625 9.51563 9.57812 7.54688 12.0094 7.54688C13.8063 7.54688 15.3469 8.64062 16.0312 10.2H17.9844V5.95312Z" fill="#655947" fill-opacity="0.72"/>
+</svg>
--- a/src/components/Logo/ChainSymbols/ethereum.svg
+++ b/src/components/Logo/ChainSymbols/ethereum.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4817 4.29043L7.08715 11.516C6.91315 11.8019 7.00806 12.1725 7.29743 12.3421L11.692 14.9163C11.8818 15.0279 12.1182 15.0279 12.308 14.9163L16.7026 12.3421C16.9919 12.1725 17.0869 11.8019 16.9129 11.516L12.5192 4.29043C12.2838 3.90319 11.7171 3.90319 11.4817 4.29043Z" fill="#6B8AFF"/>
+<path d="M15.7897 15.0102C15.7897 14.999 15.7878 14.9888 15.7869 14.9786C15.785 14.9684 15.7831 14.9582 15.7813 14.948C15.7785 14.9359 15.7748 14.9248 15.7711 14.9127C15.7683 14.9035 15.7655 14.8951 15.7608 14.8868C15.7552 14.8738 15.7478 14.8608 15.7404 14.8487C15.7366 14.8422 15.7329 14.8348 15.7283 14.8283C15.7153 14.8098 15.7013 14.7912 15.6846 14.7754C15.6678 14.7597 15.6502 14.7448 15.6316 14.7318C15.625 14.7272 15.6185 14.7244 15.6111 14.7198C15.599 14.7123 15.586 14.7049 15.573 14.6993C15.5646 14.6956 15.5553 14.6928 15.546 14.6891C15.5348 14.6854 15.5228 14.6817 15.5107 14.6789C15.5004 14.6761 15.4902 14.6743 15.48 14.6734C15.4697 14.6715 15.4595 14.6706 15.4484 14.6706C15.4363 14.6706 15.4251 14.6697 15.413 14.6706C15.4046 14.6706 15.3963 14.6724 15.387 14.6734C15.374 14.6752 15.3609 14.6761 15.3479 14.6789C15.3442 14.6789 15.3405 14.6817 15.3368 14.6826C15.2968 14.6928 15.2586 14.7086 15.2233 14.7318L12.3311 16.4363C12.1265 16.5569 11.8735 16.5569 11.6689 16.4363L8.77673 14.7318C8.74139 14.7086 8.70326 14.6928 8.66327 14.6826C8.65955 14.6817 8.65583 14.6799 8.65211 14.6789C8.63909 14.6761 8.62607 14.6752 8.61305 14.6734C8.60468 14.6724 8.59631 14.6715 8.58701 14.6706C8.57492 14.6706 8.56376 14.6706 8.55167 14.6706C8.54144 14.6706 8.53029 14.6724 8.52006 14.6734C8.50983 14.6752 8.4996 14.6771 8.48937 14.6789C8.47728 14.6817 8.46612 14.6854 8.45403 14.6891C8.44473 14.6919 8.43636 14.6956 8.42706 14.6993C8.41404 14.7049 8.40102 14.7123 8.38893 14.7198C8.38242 14.7235 8.37498 14.7272 8.36847 14.7318C8.34987 14.7448 8.33127 14.7587 8.31546 14.7754C8.29965 14.7921 8.28477 14.8098 8.27175 14.8283C8.2671 14.8348 8.26431 14.8413 8.25966 14.8487C8.25222 14.8617 8.24478 14.8738 8.2392 14.8868C8.23548 14.8951 8.23269 14.9044 8.22897 14.9127C8.22525 14.9248 8.22153 14.9359 8.21874 14.948C8.21595 14.9582 8.21409 14.9684 8.21316 14.9786C8.2113 14.9888 8.21037 15 8.21037 15.0102C8.21037 15.0213 8.20944 15.0334 8.21037 15.0445C8.21037 15.0538 8.21223 15.0621 8.21316 15.0714C8.21502 15.0844 8.21595 15.0974 8.21874 15.1095C8.21967 15.115 8.22153 15.1197 8.22339 15.1243C8.23455 15.167 8.25315 15.2069 8.28012 15.244L11.4681 19.7265C11.7275 20.0911 12.2706 20.0911 12.5301 19.7265L15.718 15.244C15.745 15.2069 15.7636 15.167 15.7748 15.1243C15.7757 15.1197 15.7785 15.1141 15.7794 15.1095C15.7822 15.0965 15.7831 15.0844 15.785 15.0714C15.7859 15.0621 15.7869 15.0538 15.7878 15.0445C15.7878 15.0334 15.7878 15.0213 15.7878 15.0102H15.7897Z" fill="#6B8AFF"/>
+</svg>
--- a/src/components/Logo/ChainSymbols/optimism.svg
+++ b/src/components/Logo/ChainSymbols/optimism.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.21407 16.0001C6.35029 16.0001 5.64303 15.7928 5.0923 15.3783C4.54737 14.9579 4.2749 14.3539 4.2749 13.5782C4.2749 13.4124 4.29229 13.2169 4.32708 12.9801C4.41983 12.4471 4.55317 11.8076 4.72708 11.0556C5.21984 9.01852 6.49522 8 8.54742 8C9.10395 8 9.6083 8.09475 10.0489 8.29016C10.4895 8.47373 10.8373 8.75797 11.0924 9.13695C11.3475 9.51001 11.475 9.95413 11.475 10.4693C11.475 10.6233 11.4576 10.8187 11.4228 11.0556C11.3127 11.7129 11.1851 12.3583 11.0286 12.9801C10.7735 13.9927 10.3387 14.7566 9.71265 15.2599C9.09235 15.7573 8.25756 16.0001 7.21407 16.0001ZM7.37059 14.4013C7.77639 14.4013 8.11843 14.2769 8.40249 14.0341C8.69235 13.7913 8.90105 13.4183 9.02279 12.909C9.1909 12.2103 9.31844 11.6063 9.4054 11.0852C9.43439 10.9312 9.45178 10.7713 9.45178 10.6055C9.45178 9.93045 9.10974 9.59291 8.41988 9.59291C8.01408 9.59291 7.66625 9.71727 7.37639 9.96005C7.09233 10.2028 6.88943 10.5759 6.76769 11.0852C6.63435 11.5826 6.50681 12.1866 6.37348 12.909C6.34449 13.0571 6.3271 13.211 6.3271 13.3768C6.3213 14.0637 6.67493 14.4013 7.37059 14.4013Z" fill="#FF0420"/>
+<path d="M11.9672 16.0001C11.8796 16.0001 11.817 15.9757 11.7669 15.9209C11.7293 15.8601 11.7168 15.7931 11.7293 15.7139L13.3509 8.28615C13.3634 8.20092 13.4073 8.13394 13.4824 8.07915C13.5513 8.02435 13.6264 8 13.7078 8H16.8321C17.7024 8 18.3974 8.17656 18.9233 8.5236C19.4555 8.87672 19.7247 9.38206 19.7247 10.0457C19.7247 10.2344 19.6997 10.4353 19.6558 10.6423C19.4617 11.5191 19.0673 12.1644 18.4662 12.5845C17.8777 13.0046 17.07 13.2116 16.0432 13.2116H14.4591L13.9207 15.7139C13.9019 15.7992 13.8643 15.8662 13.7892 15.9209C13.7203 15.9757 13.6452 16.0001 13.5638 16.0001H11.9672ZM16.1246 11.6347C16.4564 11.6347 16.7382 11.5495 16.9824 11.3729C17.2328 11.1964 17.3956 10.9468 17.477 10.618C17.502 10.4901 17.5145 10.3745 17.5145 10.277C17.5145 10.0579 17.4457 9.88739 17.3142 9.77171C17.1827 9.64994 16.951 9.58906 16.6317 9.58906H15.223L14.7785 11.6347H16.1246Z" fill="#FF0420"/>
+</svg>
--- a/src/components/Logo/ChainSymbols/polygon.svg
+++ b/src/components/Logo/ChainSymbols/polygon.svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8793 14.9238L19.6748 12.7103C19.8758 12.5934 20 12.3751 20 12.1404V7.71327C20 7.4786 19.8748 7.26022 19.6748 7.14336L15.8793 4.9298C15.6783 4.81295 15.429 4.81295 15.228 4.9298L11.4325 7.14336C11.2315 7.26022 11.1073 7.4786 11.1073 7.71327V15.625L8.44587 17.1767L5.78441 15.625V12.5206L8.44587 10.9689L10.2009 11.9929V9.91054L8.77108 9.07627C8.67247 9.0188 8.55964 8.98815 8.44587 8.98815C8.33209 8.98815 8.21831 9.0188 8.12065 9.07627L4.32521 11.2898C4.12421 11.4067 4 11.6251 4 11.8597V16.2868C4 16.5206 4.12516 16.7399 4.32521 16.8568L8.12065 19.0703C8.32166 19.1872 8.57102 19.1872 8.77203 19.0703L12.5675 16.8568C12.7685 16.7399 12.8927 16.5215 12.8927 16.2868V8.37514L12.941 8.34736L15.5541 6.82344L18.2156 8.37514V11.4795L15.5541 13.0312L13.801 12.0092V14.0915L15.228 14.9238C15.429 15.0407 15.6783 15.0407 15.8793 14.9238Z" fill="#9558FF"/>
+</svg>
--- a/src/components/Logo/CurrencyLogo.tsx
+++ b/src/components/Logo/CurrencyLogo.tsx
@@ -15,7 +15,6 @@ export default function CurrencyLogo(
      address={props.currency?.wrapped.address}
      symbol={props.symbol ?? props.currency?.symbol}
      backupImg={(props.currency as TokenInfo)?.logoURI}
-      hideL2Icon={props.hideL2Icon ?? true}
      {...props}
    />
  )

--- a/src/components/Logo/QueryTokenLogo.tsx
+++ b/src/components/Logo/QueryTokenLogo.tsx
-import { NATIVE_CHAIN_ID } from 'constants/tokens'
-import { TokenStandard } from 'graphql/data/__generated__/types-and-hooks'
+import { ChainId } from '@uniswap/sdk-core'
+import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioLogo'
 import { SearchToken } from 'graphql/data/SearchTokens'
 import { TokenQueryData } from 'graphql/data/Token'
 import { TopToken } from 'graphql/data/TopTokens'
-import { supportedChainIdFromGQLChain } from 'graphql/data/util'
+import { gqlToCurrency, supportedChainIdFromGQLChain } from 'graphql/data/util'
+import { useMemo } from 'react'

-import AssetLogo, { AssetLogoBaseProps } from './AssetLogo'
+import { AssetLogoBaseProps } from './AssetLogo'

 export default function QueryTokenLogo(
  props: AssetLogoBaseProps & {
    token?: TopToken | TokenQueryData | SearchToken
  }
 ) {
-  const chainId = props.token?.chain ? supportedChainIdFromGQLChain(props.token?.chain) : undefined
+  const chainId =
+    (props.token?.chain ? supportedChainIdFromGQLChain(props.token?.chain) : ChainId.MAINNET) ?? ChainId.MAINNET
+  const currency = props.token ? gqlToCurrency(props.token) : undefined

-  return (
-    <AssetLogo
-      isNative={
-        // TODO(cartcrom): simplify this check after backend fixes token standard on assetActivities tokens
-        !props.token?.address ||
-        props.token?.standard === TokenStandard.Native ||
-        props.token?.address === NATIVE_CHAIN_ID
-      }
-      chainId={chainId}
-      address={props.token?.address}
-      symbol={props.token?.symbol}
-      backupImg={props.token?.project?.logoUrl}
-      {...props}
-    />
-  )
+  return <PortfolioLogo currencies={useMemo(() => [currency], [currency])} chainId={chainId} {...props} />
 }
--- a/src/components/NavBar/ChainSelector.css.ts
+++ b/src/components/NavBar/ChainSelector.css.ts
@@ -14,10 +14,3 @@ export const ChainSelector = style([
    background: 'none',
  }),
 ])
-
-export const Image = style([
-  sprinkles({
-    width: '24',
-    height: '24',
-  }),
-])
--- a/src/components/NavBar/ChainSelector.tsx
+++ b/src/components/NavBar/ChainSelector.tsx
@@ -2,6 +2,7 @@ import { t } from '@lingui/macro'
 import { ChainId } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { showTestnetsAtom } from 'components/AccountDrawer/TestnetsToggle'
+import { ChainLogo } from 'components/Logo/ChainLogo'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { getConnection } from 'connection'
 import { ConnectionType } from 'connection/types'
@@ -145,7 +146,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
          {!isSupported ? (
            <AlertTriangle size={20} color={theme.neutral2} />
          ) : (
-            <img src={info.logoUrl} alt={info.label} className={styles.Image} data-testid="chain-selector-logo" />
+            <ChainLogo chainId={chainId} size={24} testId="chain-selector-logo" />
          )}
          {isOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
        </Row>

--- a/src/components/NavBar/ChainSelectorRow.tsx
+++ b/src/components/NavBar/ChainSelectorRow.tsx
@@ -4,6 +4,7 @@ import { ChainId } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { TraceEvent } from 'analytics'
 import Loader from 'components/Icons/LoadingSpinner'
+import { ChainLogo } from 'components/Logo/ChainLogo'
 import { getChainInfo } from 'constants/chainInfo'
 import { CheckMarkIcon } from 'nft/components/icons'
 import styled, { useTheme } from 'styled-components'
@@ -36,14 +37,12 @@ const Container = styled.button<{ disabled: boolean }>`
    background-color: ${({ disabled, theme }) => (disabled ? 'none' : theme.surface3)};
  }
 `
-
 const Label = styled.div`
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 485;
 `
-
 const Status = styled.div`
  grid-column: 3;
  grid-row: 1;
@@ -51,7 +50,6 @@ const Status = styled.div`
  align-items: center;
  width: ${LOGO_SIZE}px;
 `
-
 const CaptionText = styled.div`
  color: ${({ theme }) => theme.neutral2};
  font-size: 12px;
@@ -59,11 +57,6 @@ const CaptionText = styled.div`
  grid-row: 2;
 `

-const Logo = styled.img`
-  height: ${LOGO_SIZE}px;
-  width: ${LOGO_SIZE}px;
-  margin-right: 12px;
-`
 interface ChainSelectorRowProps {
  disabled?: boolean
  targetChain: ChainId
@@ -75,7 +68,6 @@ export default function ChainSelectorRow({ disabled, targetChain, onSelectChain,
  const active = chainId === targetChain
  const chainInfo = getChainInfo(targetChain)
  const label = chainInfo?.label
-  const logoUrl = chainInfo?.logoUrl

  const theme = useTheme()

@@ -88,7 +80,7 @@ export default function ChainSelectorRow({ disabled, targetChain, onSelectChain,
          if (!disabled) onSelectChain(targetChain)
        }}
      >
-        {logoUrl && <Logo src={logoUrl} alt={label} />}
+        <ChainLogo chainId={targetChain} size={LOGO_SIZE} style={{ marginRight: '12px' }} />
        {label && <Label>{label}</Label>}
        {disabled && (
          <CaptionText>

--- a/src/components/NavBar/SearchBarDropdown.tsx
+++ b/src/components/NavBar/SearchBarDropdown.tsx
@@ -5,7 +5,7 @@ import { useWeb3React } from '@web3-react/core'
 import { useTrace } from 'analytics'
 import clsx from 'clsx'
 import Badge from 'components/Badge'
-import { getChainInfo } from 'constants/chainInfo'
+import { ChainLogo } from 'components/Logo/ChainLogo'
 import { HistoryDuration, SafetyLevel } from 'graphql/data/__generated__/types-and-hooks'
 import { useTrendingCollections } from 'graphql/data/nft/TrendingCollections'
 import { SearchToken } from 'graphql/data/SearchTokens'
@@ -107,11 +107,6 @@ function isKnownToken(token: SearchToken) {
  return token.project?.safetyLevel == SafetyLevel.Verified || token.project?.safetyLevel == SafetyLevel.MediumWarning
 }

-const ChainLogo = styled.img`
-  height: 20px;
-  width: 20px;
-  margin-right: 8px;
-`
 const ChainComingSoonBadge = styled(Badge)`
  align-items: center;
  background-color: ${({ theme }) => theme.surface2};
@@ -123,6 +118,7 @@ const ChainComingSoonBadge = styled(Badge)`
  padding: 8px;
  margin: 16px 16px 4px;
  width: calc(100% - 32px);
+  gap: 8px;
 `

 interface SearchBarDropdownProps {
@@ -138,7 +134,6 @@ export const SearchBarDropdown = (props: SearchBarDropdownProps) => {
  const { isLoading } = props
  const { chainId } = useWeb3React()
  const showChainComingSoonBadge = chainId && BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS.includes(chainId) && !isLoading
-  const logoUri = getChainInfo(chainId)?.logoUrl

  return (
    <Column overflow="hidden" className={clsx(styles.searchBarDropdownNft, styles.searchBarScrollable)}>
@@ -150,7 +145,7 @@ export const SearchBarDropdown = (props: SearchBarDropdownProps) => {
        </SuspenseWithPreviousRenderAsFallback>
        {showChainComingSoonBadge && (
          <ChainComingSoonBadge>
-            <ChainLogo src={logoUri} />
+            <ChainLogo chainId={chainId} size={20} />
            <ThemedText.BodySmall color="neutral2" fontSize="14px" fontWeight="400" lineHeight="20px">
              <ComingSoonText chainId={chainId} />
            </ThemedText.BodySmall>

--- a/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap
+++ b/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap
--- a/src/components/NetworkAlert/NetworkAlert.tsx
+++ b/src/components/NetworkAlert/NetworkAlert.tsx
 import { Trans } from '@lingui/macro'
-import { ChainId } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
+import { getChainUI } from 'components/Logo/ChainLogo'
+import { RowBetween } from 'components/Row'
 import { getChainInfo } from 'constants/chainInfo'
+import { isSupportedChain } from 'constants/chains'
 import { ArrowUpRight } from 'react-feather'
 import styled from 'styled-components'
-import { colors } from 'theme/colors'
-import { ExternalLink, HideSmall } from 'theme/components'
-import { useDarkModeManager } from 'theme/components/ThemeToggle'
+import { ExternalLink, HideSmall, ThemedText } from 'theme/components'
+import { useIsDarkMode } from 'theme/components/ThemeToggle'

 import Column from '../Column'

-const L2Icon = styled.img`
-  width: 24px;
-  height: 24px;
-  margin-right: 16px;
-`
-
-const BodyText = styled.div`
+const BridgeLink = styled(ExternalLink)<{ bgColor: string }>`
  color: ${({ color }) => color};
-  display: flex;
+  background: ${({ bgColor }) => bgColor};
  align-items: center;
-  justify-content: flex-start;
-  margin: 8px;
-  font-size: 14px;
-  line-height: 20px;
-`
-const RootWrapper = styled.div`
-  margin-top: 16px;
-`
-
-const SHOULD_SHOW_ALERT = {
-  [ChainId.OPTIMISM]: true,
-  [ChainId.OPTIMISM_GOERLI]: true,
-  [ChainId.ARBITRUM_ONE]: true,
-  [ChainId.ARBITRUM_GOERLI]: true,
-  [ChainId.POLYGON]: true,
-  [ChainId.POLYGON_MUMBAI]: true,
-  [ChainId.CELO]: true,
-  [ChainId.CELO_ALFAJORES]: true,
-  [ChainId.BNB]: true,
-  [ChainId.AVALANCHE]: true,
-  [ChainId.BASE]: true,
-}
-
-type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
-
-const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
-  [darkMode in 'dark' | 'light']: { [chainId in NetworkAlertChains]: string }
-} = {
-  dark: {
-    [ChainId.POLYGON]:
-      'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
-    [ChainId.POLYGON_MUMBAI]:
-      'radial-gradient(100% 93.36% at 0% 6.64%, rgba(160, 108, 247, 0.1) 0%, rgba(82, 32, 166, 0.1) 100%)',
-    [ChainId.CELO]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(90, 190, 170, 0.15) 0%, rgba(80, 160, 40, 0.15) 100%)',
-    [ChainId.CELO_ALFAJORES]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(90, 190, 170, 0.15) 0%, rgba(80, 160, 40, 0.15) 100%)',
-    [ChainId.BNB]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(240, 185, 11, 0.16) 0%, rgba(255, 168, 0, 0.16) 100%)',
-    [ChainId.OPTIMISM]:
-      'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.01) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.01) 0%, rgba(235, 0, 255, 0.01) 96%)',
-    [ChainId.OPTIMISM_GOERLI]:
-      'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.04) 0%, rgba(235, 0, 255, 0.01 96%)',
-    [ChainId.ARBITRUM_ONE]:
-      'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.01) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.05) 100%), hsla(0, 0%, 100%, 0.05)',
-    [ChainId.ARBITRUM_GOERLI]:
-      'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.05) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(75% 75% at 0% 0%, rgba(150, 190, 220, 0.05) 0%, rgba(33, 114, 229, 0.1) 100%), hsla(0, 0%, 100%, 0.05)',
-    [ChainId.AVALANCHE]:
-      'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.01) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.01) 0%, rgba(235, 0, 255, 0.01) 96%)',
-    [ChainId.BASE]:
-      'radial-gradient(100% 100% at 50% 0%, rgba(10, 41, 75, 0.7) 0%, rgba(0, 82, 255, .1) 40%, rgba(0, 82, 255, 0) 100%), rgb(13, 14, 14);',
-  },
-  light: {
-    [ChainId.POLYGON]:
-      'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)',
-    [ChainId.POLYGON_MUMBAI]:
-      'radial-gradient(182.71% 205.59% at 2.81% 7.69%, rgba(130, 71, 229, 0.2) 0%, rgba(167, 202, 255, 0.2) 100%)',
-    [ChainId.CELO]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
-    [ChainId.CELO_ALFAJORES]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
-    [ChainId.BNB]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(240, 185, 11, 0.16) 0%, rgba(255, 168, 0, 0.16) 100%)',
-    [ChainId.OPTIMISM]:
-      'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
-    [ChainId.OPTIMISM_GOERLI]:
-      'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
-    [ChainId.ARBITRUM_ONE]:
-      'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)',
-    [ChainId.ARBITRUM_GOERLI]:
-      'radial-gradient(285% 8200% at 30% 50%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),radial-gradient(circle at top left, hsla(206, 50%, 75%, 0.01), hsla(215, 79%, 51%, 0.12)), hsla(0, 0%, 100%, 0.1)',
-    [ChainId.AVALANCHE]:
-      'radial-gradient(92% 105% at 50% 7%, rgba(255, 58, 212, 0.04) 0%, rgba(255, 255, 255, 0.03) 100%),radial-gradient(100% 97% at 0% 12%, rgba(235, 0, 255, 0.1) 0%, rgba(243, 19, 19, 0.1) 100%), hsla(0, 0%, 100%, 0.1)',
-    [ChainId.BASE]:
-      'radial-gradient(100% 100% at 50% 0%, rgba(0, 82, 255, 0.20) 0%, rgba(0, 82, 255, 0.08) 40.0%, rgba(252, 255, 82, 0.00) 100%), rgb(255, 255, 255)',
-  },
-}
+  border-radius: 8px;
+  color: white;
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  padding: 12px 18px 12px 12px;
+  text-decoration: none !important;
+  width: 100%;

-const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boolean; logoUrl: string }>`
-  background: ${({ chainId, darkMode }) => BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID[darkMode ? 'dark' : 'light'][chainId]};
  border-radius: 20px;
  display: flex;
  flex-direction: row;
+  gap: 12px;
  overflow: hidden;
  position: relative;
  width: 100%;

-  :before {
-    background-image: url(${({ logoUrl }) => logoUrl});
-    background-repeat: no-repeat;
-    background-size: 300px;
-    content: '';
-    height: 300px;
-    opacity: 0.1;
-    position: absolute;
-    transform: rotate(25deg) translate(-90px, -40px);
-    width: 300px;
-    pointer-events: none;
-  }
-`
-const Header = styled.h2`
-  font-weight: 535;
-  font-size: 16px;
-  margin: 0;
+  margin-top: 16px;
 `

-const LinkOutToBridge = styled(ExternalLink)`
-  align-items: center;
-  border-radius: 8px;
-  color: white;
-  display: flex;
-  font-size: 16px;
-  justify-content: space-between;
-  padding: 6px 8px;
-  text-decoration: none !important;
-  width: 100%;
+const TitleText = styled(ThemedText.BodyPrimary)<{ $color: string }>`
+  font-weight: 535;
+  color: ${({ $color }) => $color};
 `

-const StyledArrowUpRight = styled(ArrowUpRight)`
-  margin-left: 12px;
-  width: 24px;
-  height: 24px;
+const SubtitleText = styled(ThemedText.BodySmall)<{ $color: string }>`
+  line-height: 20px;
+  color: ${({ $color }) => $color};
 `

-const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
-  [ChainId.POLYGON]: 'rgba(130, 71, 229)',
-  [ChainId.POLYGON_MUMBAI]: 'rgba(130, 71, 229)',
-  [ChainId.CELO]: 'rgba(53, 178, 97)',
-  [ChainId.CELO_ALFAJORES]: 'rgba(53, 178, 97)',
-  [ChainId.OPTIMISM]: '#ff3856',
-  [ChainId.OPTIMISM_GOERLI]: '#ff3856',
-  [ChainId.ARBITRUM_ONE]: '#0490ed',
-  [ChainId.BNB]: colors.gold400,
-  [ChainId.ARBITRUM_GOERLI]: '#0490ed',
-  [ChainId.AVALANCHE]: '#ff3856',
-  [ChainId.BASE]: colors.networkBase,
-}
-
-function shouldShowAlert(chainId: number | undefined): chainId is NetworkAlertChains {
-  return Boolean(chainId && SHOULD_SHOW_ALERT[chainId as unknown as NetworkAlertChains])
-}
-
 export function NetworkAlert() {
  const { chainId } = useWeb3React()
-  const [darkMode] = useDarkModeManager()
-
-  if (!shouldShowAlert(chainId)) {
-    return null
-  }
-
-  const chainInfo = getChainInfo(chainId)
+  const darkMode = useIsDarkMode()

-  if (!chainInfo) return null
+  if (!chainId || !isSupportedChain(chainId)) return null

-  const { label, logoUrl, bridge } = chainInfo
-  const textColor = TEXT_COLORS[chainId]
+  const { Symbol: ChainSymbol, bgColor, textColor } = getChainUI(chainId, darkMode)
+  const { label, bridge } = getChainInfo(chainId)

  return bridge ? (
-    <RootWrapper>
-      <ContentWrapper chainId={chainId} darkMode={darkMode} logoUrl={logoUrl}>
-        <LinkOutToBridge href={bridge}>
-          <BodyText color={textColor}>
-            <L2Icon src={logoUrl} />
-            <Column>
-              <Header>
-                <Trans>{label} token bridge</Trans>
-              </Header>
-              <HideSmall>
-                <Trans>Deposit tokens to the {label} network.</Trans>
-              </HideSmall>
-            </Column>
-          </BodyText>
-          <StyledArrowUpRight color={textColor} />
-        </LinkOutToBridge>
-      </ContentWrapper>
-    </RootWrapper>
+    <BridgeLink href={bridge} bgColor={bgColor}>
+      <ChainSymbol width={40} height={40} stroke="none" />
+      <RowBetween>
+        <Column>
+          <TitleText $color={textColor}>
+            <Trans>{label} token bridge</Trans>
+          </TitleText>
+          <HideSmall>
+            <SubtitleText $color={textColor}>
+              <Trans>Deposit tokens to the {label} network.</Trans>
+            </SubtitleText>
+          </HideSmall>
+        </Column>
+        <ArrowUpRight width="24px" height="24px" color={textColor} />
+      </RowBetween>
+    </BridgeLink>
  ) : null
 }
--- a/src/components/Tokens/TokenDetails/BalanceSummary.tsx
+++ b/src/components/Tokens/TokenDetails/BalanceSummary.tsx
 import { Trans } from '@lingui/macro'
 import { ChainId, Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import CurrencyLogo from 'components/Logo/CurrencyLogo'
+import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioLogo'
 import { getChainInfo } from 'constants/chainInfo'
 import { asSupportedChain } from 'constants/chains'
 import { useStablecoinValue } from 'hooks/useStablecoinPrice'
 import useCurrencyBalance from 'lib/hooks/useCurrencyBalance'
+import { useMemo } from 'react'
 import styled, { useTheme } from 'styled-components'
 import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
@@ -75,6 +76,8 @@ export default function BalanceSummary({ token }: { token: Currency }) {
    type: NumberType.FiatTokenStats,
  })

+  const currencies = useMemo(() => [token], [token])
+
  if (!account || !balance) {
    return null
  }
@@ -85,7 +88,7 @@ export default function BalanceSummary({ token }: { token: Currency }) {
          <Trans>Your balance on {label}</Trans>
        </ThemedText.SubHeaderSmall>
        <BalanceRow>
-          <CurrencyLogo currency={token} size="2rem" hideL2Icon={false} />
+          <PortfolioLogo currencies={currencies} chainId={token.chainId} size="2rem" />
          <BalanceContainer>
            <BalanceAmountsContainer>
              <BalanceItem>

--- a/src/components/Tokens/TokenDetails/index.tsx
+++ b/src/components/Tokens/TokenDetails/index.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { InterfacePageName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { Trace } from 'analytics'
-import CurrencyLogo from 'components/Logo/CurrencyLogo'
+import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioLogo'
 import { AboutSection } from 'components/Tokens/TokenDetails/About'
 import AddressSection from 'components/Tokens/TokenDetails/AddressSection'
 import BalanceSummary from 'components/Tokens/TokenDetails/BalanceSummary'
@@ -212,7 +212,7 @@ export default function TokenDetails({
            </BreadcrumbNavLink>
            <TokenInfoContainer data-testid="token-info-container">
              <TokenNameCell>
-                <CurrencyLogo currency={detailedToken} size="32px" hideL2Icon={false} />
+                <PortfolioLogo currencies={[detailedToken]} chainId={detailedToken.chainId} size="32px" />
                <TokenTitle>
                  {detailedToken.name ?? <Trans>Name not found</Trans>}
                  <TokenSymbol>{detailedToken.symbol ?? <Trans>Symbol not found</Trans>}</TokenSymbol>

--- a/src/components/Tokens/TokenTable/NetworkFilter.tsx
+++ b/src/components/Tokens/TokenTable/NetworkFilter.tsx
 import Badge from 'components/Badge'
+import { ChainLogo } from 'components/Logo/ChainLogo'
 import { getChainInfo } from 'constants/chainInfo'
 import {
  BACKEND_NOT_YET_SUPPORTED_CHAIN_IDS,
@@ -91,10 +92,6 @@ const NetworkLabel = styled.div`
  gap: 8px;
  align-items: center;
 `
-const Logo = styled.img`
-  height: 20px;
-  width: 20px;
-`
 const CheckContainer = styled.div`
  display: flex;
  flex-direction: flex-end;
@@ -118,10 +115,10 @@ export default function NetworkFilter() {
  useOnClickOutside(node, open ? toggleMenu : undefined)
  const navigate = useNavigate()

-  const { chainName } = useParams<{ chainName?: string }>()
-  const currentChainName = validateUrlChainParam(chainName)
+  const currentChainName = validateUrlChainParam(useParams().chainName)
+  const chainId = supportedChainIdFromGQLChain(currentChainName)

-  const chainInfo = getChainInfo(supportedChainIdFromGQLChain(currentChainName))
+  const chainInfo = getChainInfo(chainId)

  return (
    <StyledMenu ref={node}>
@@ -133,7 +130,7 @@ export default function NetworkFilter() {
      >
        <StyledMenuContent>
          <NetworkLabel>
-            <Logo src={chainInfo.logoUrl} /> {chainInfo.label}
+            <ChainLogo chainId={chainId} size={20} /> {chainInfo.label}
          </NetworkLabel>
          <Chevron open={open}>
            {open ? (
@@ -147,7 +144,8 @@ export default function NetworkFilter() {
      {open && (
        <MenuTimeFlyout>
          {BACKEND_SUPPORTED_CHAINS.map((network) => {
-            const chainInfo = getChainInfo(supportedChainIdFromGQLChain(network))
+            const chainId = supportedChainIdFromGQLChain(network)
+            const chainInfo = getChainInfo(chainId)
            return (
              <InternalLinkMenuItem
                key={network}
@@ -158,8 +156,7 @@ export default function NetworkFilter() {
                }}
              >
                <NetworkLabel>
-                  <Logo src={chainInfo.logoUrl} />
-                  {chainInfo.label}
+                  <ChainLogo chainId={chainId} size={20} /> {chainInfo.label}
                </NetworkLabel>
                {network === currentChainName && (
                  <CheckContainer>
@@ -178,8 +175,7 @@ export default function NetworkFilter() {
                disabled
              >
                <NetworkLabel>
-                  <Logo src={chainInfo.logoUrl} />
-                  {chainInfo.label}
+                  <ChainLogo chainId={network} size={20} /> {chainInfo.label}
                </NetworkLabel>
                <Tag>Coming soon</Tag>
              </InternalLinkMenuItem>

--- a/src/components/Tokens/TokenTable/TokenRow.tsx
+++ b/src/components/Tokens/TokenTable/TokenRow.tsx
@@ -113,7 +113,7 @@ const ClickableContent = styled.div<{ gap?: number }>`
  cursor: pointer;
 `
 const ClickableName = styled(ClickableContent)`
-  gap: 8px;
+  gap: 12px;
  max-width: 100%;
 `
 const StyledHeaderRow = styled(StyledTokenRow)`
@@ -480,7 +480,7 @@ export const LoadedRow = forwardRef((props: LoadedRowProps, ref: ForwardedRef<HT
          listNumber={sortRank}
          tokenInfo={
            <ClickableName>
-              <QueryTokenLogo token={token} />
+              <QueryTokenLogo token={token} size="32px" />
              <TokenInfoCell>
                <TokenName data-cy="token-name">{token.name}</TokenName>
                <TokenSymbol>{token.symbol}</TokenSymbol>

--- a/src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap
+++ b/src/components/Tokens/TokenTable/__snapshots__/TokenRow.test.tsx.snap
@@ -2,51 +2,23 @@

 exports[`LoadedRow.tsx renders a row 1`] = `
 <DocumentFragment>
-  .c9 {
-  opacity: 0;
-  -webkit-transition: opacity 250ms ease-in;
-  transition: opacity 250ms ease-in;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
+  .c7 {
+  position: relative;
+  top: 0;
+  left: 0;
 }

 .c8 {
-  width: 24px;
-  height: 24px;
-  background: #22222212;
-  -webkit-transition: background-color 250ms ease-in;
-  transition: background-color 250ms ease-in;
-  box-shadow: 0 0 1px white;
+  width: 32px;
+  height: 32px;
  border-radius: 50%;
 }

-.c7 {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.c10 {
-  --size: calc(24px / 2);
-  width: var(--size);
-  height: var(--size);
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  background: url();
-  background-repeat: no-repeat;
-  background-size: calc(24px / 2) calc(24px / 2);
-  display: none;
-}
-
-.c18 {
+.c16 {
  color: #40B66B;
 }

-.c19 {
+.c17 {
  color: #40B66B;
 }

@@ -105,7 +77,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
  cursor: pointer;
 }

-.c21 {
+.c19 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@@ -122,7 +94,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }

 .c6 {
-  gap: 8px;
+  gap: 12px;
  max-width: 100%;
 }

@@ -132,7 +104,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
  font-size: 14px;
 }

-.c14 {
+.c12 {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
@@ -146,7 +118,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
  transition: background-color 250ms ease;
 }

-.c22 {
+.c20 {
  padding-right: 8px;
 }

@@ -160,19 +132,19 @@ exports[`LoadedRow.tsx renders a row 1`] = `
  gap: 8px;
 }

-.c15 {
+.c13 {
  padding-right: 8px;
 }

-.c20 {
+.c18 {
  padding-right: 8px;
 }

-.c17 {
+.c15 {
  display: none;
 }

-.c16 {
+.c14 {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
@@ -182,12 +154,12 @@ exports[`LoadedRow.tsx renders a row 1`] = `
  flex: 1;
 }

-.c24 {
+.c22 {
  padding: 0px 24px;
  min-width: 120px;
 }

-.c25 {
+.c23 {
  width: 124px;
  height: 42px;
 }
@@ -197,7 +169,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
  text-decoration: none;
 }

-.c11 {
+.c9 {
  gap: 8px;
  line-height: 24px;
  font-size: 16px;
@@ -207,19 +179,19 @@ exports[`LoadedRow.tsx renders a row 1`] = `
  white-space: nowrap;
 }

-.c12 {
+.c10 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
 }

-.c13 {
+.c11 {
  color: #7D7D7D;
  text-transform: uppercase;
 }

-.c23 {
+.c21 {
  padding-right: 8px;
 }

@@ -260,7 +232,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }

 @media only screen and (max-width:720px) {
-  .c22 {
+  .c20 {
    display: none;
  }
 }
@@ -272,13 +244,13 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }

 @media only screen and (max-width:540px) {
-  .c20 {
+  .c18 {
    display: none;
  }
 }

 @media only screen and (max-width:540px) {
-  .c17 {
+  .c15 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
@@ -295,7 +267,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }

 @media only screen and (max-width:540px) {
-  .c16 {
+  .c14 {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
@@ -307,13 +279,13 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }

 @media only screen and (max-width:1200px) {
-  .c24 {
+  .c22 {
    display: none;
  }
 }

 @media only screen and (max-width:540px) {
-  .c11 {
+  .c9 {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
@@ -330,7 +302,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }

 @media only screen and (max-width:540px) {
-  .c13 {
+  .c11 {
    font-size: 12px;
    height: 16px;
    -webkit-box-pack: start;
@@ -342,7 +314,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
 }

 @media only screen and (max-width:840px) {
-  .c23 {
+  .c21 {
    display: none;
  }
 }
@@ -371,32 +343,23 @@ exports[`LoadedRow.tsx renders a row 1`] = `
          >
            <div
              class="c7"
-              style="height: 24px; width: 24px;"
            >
-              <div
+              <img
                class="c8"
-              >
-                <img
-                  alt="USDC logo"
-                  class="c9"
-                  src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
-                />
-              </div>
-              <div
-                class="c10"
+                src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
              />
            </div>
            <div
-              class="c2 c11"
+              class="c2 c9"
            >
              <div
-                class="c12"
+                class="c10"
                data-cy="token-name"
              >
                USD Coin
              </div>
              <div
-                class="c2 c13"
+                class="c2 c11"
              >
                USDC
              </div>
@@ -404,22 +367,22 @@ exports[`LoadedRow.tsx renders a row 1`] = `
          </div>
        </div>
        <div
-          class="c2 c14 c15"
+          class="c2 c12 c13"
          data-testid="price-cell"
        >
          <div
            class="c5"
          >
            <div
-              class="c2 c16"
+              class="c2 c14"
            >
              $1.00
              <div
-                class="c2 c17"
+                class="c2 c15"
              >
                <svg
                  aria-label="up"
-                  class="c18"
+                  class="c16"
                  fill="none"
                  height="14"
                  viewBox="0 0 24 24"
@@ -432,7 +395,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
                  />
                </svg>
                <span
-                  class="c19"
+                  class="c17"
                >
                  0.00%
                </span>
@@ -441,15 +404,15 @@ exports[`LoadedRow.tsx renders a row 1`] = `
          </div>
        </div>
        <div
-          class="c2 c14 c20"
+          class="c2 c12 c18"
          data-testid="percent-change-cell"
        >
          <div
-            class="c21"
+            class="c19"
          >
            <svg
              aria-label="up"
-              class="c18"
+              class="c16"
              fill="none"
              height="16"
              viewBox="0 0 24 24"
@@ -462,14 +425,14 @@ exports[`LoadedRow.tsx renders a row 1`] = `
              />
            </svg>
            <span
-              class="c19"
+              class="c17"
            >
              0.00%
            </span>
          </div>
        </div>
        <div
-          class="c2 c14 c22"
+          class="c2 c12 c20"
          data-testid="tvl-cell"
        >
          <div
@@ -479,7 +442,7 @@ exports[`LoadedRow.tsx renders a row 1`] = `
          </div>
        </div>
        <div
-          class="c2 c14 c23"
+          class="c2 c12 c21"
          data-testid="volume-cell"
        >
          <div
@@ -489,10 +452,10 @@ exports[`LoadedRow.tsx renders a row 1`] = `
          </div>
        </div>
        <div
-          class="c2 c24"
+          class="c2 c22"
        >
          <div
-            class="c2 c25"
+            class="c2 c23"
          >
            <div
              style="width: 100%; height: 100%;"

--- a/src/components/TransactionConfirmationModal/index.tsx
+++ b/src/components/TransactionConfirmationModal/index.tsx
@@ -2,6 +2,7 @@ import { t, Trans } from '@lingui/macro'
 import { ChainId, Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import Badge from 'components/Badge'
+import { ChainLogo } from 'components/Logo/ChainLogo'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedL2ChainId } from 'constants/chains'
 import useCurrencyLogoURIs from 'lib/hooks/useCurrencyLogoURIs'
@@ -39,12 +40,6 @@ const ConfirmedIcon = styled(ColumnCenter)<{ inline?: boolean }>`
  padding: ${({ inline }) => (inline ? '20px 0' : '32px 0;')};
 `

-const StyledLogo = styled.img`
-  height: 16px;
-  width: 16px;
-  margin-left: 6px;
-`
-
 const ConfirmationModalContentWrapper = styled(AutoColumn)`
  padding-bottom: 12px;
 `
@@ -231,8 +226,8 @@ function L2Content({
        {!inline && (
          <RowBetween mb="16px">
            <Badge>
-              <RowFixed>
-                <StyledLogo src={info.logoUrl} style={{ margin: '0 8px 0 0' }} />
+              <RowFixed gap="8px">
+                <ChainLogo chainId={chainId} />
                {info.label}
              </RowFixed>
            </Badge>

--- a/src/components/swap/ConfirmSwapModal.tsx
+++ b/src/components/swap/ConfirmSwapModal.tsx
@@ -9,6 +9,7 @@ import { Currency, Percent } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, Trace, useTrace } from 'analytics'
 import Badge from 'components/Badge'
+import { ChainLogo } from 'components/Logo/ChainLogo'
 import Modal, { MODAL_TRANSITION_DURATION } from 'components/Modal'
 import { RowFixed } from 'components/Row'
 import { getChainInfo } from 'constants/chainInfo'
@@ -55,11 +56,6 @@ const StyledL2Badge = styled(Badge)`
  padding: 6px 8px;
 `

-const StyledL2Logo = styled.img`
-  height: 16px;
-  width: 16px;
-`
-
 function isInApprovalPhase(confirmModalState: ConfirmModalState) {
  return (
    confirmModalState === ConfirmModalState.RESETTING_TOKEN_ALLOWANCE ||
@@ -412,7 +408,7 @@ export default function ConfirmSwapModal({
      return (
        <StyledL2Badge>
          <RowFixed data-testid="confirmation-modal-chain-icon" gap="sm">
-            <StyledL2Logo src={info.logoUrl} />
+            <ChainLogo chainId={chainId} size={16} />
            <ThemedText.SubHeaderSmall>{info.label}</ThemedText.SubHeaderSmall>
          </RowFixed>
        </StyledL2Badge>

--- a/src/components/swap/SwapLineItem.tsx
+++ b/src/components/swap/SwapLineItem.tsx
 import { t, Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { LoadingRow } from 'components/Loader/styled'
+import { ChainLogo } from 'components/Logo/ChainLogo'
 import RouterLabel from 'components/RouterLabel'
 import Row, { RowBetween } from 'components/Row'
 import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
-import { getChainInfo } from 'constants/chainInfo'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useHoverProps from 'hooks/useHoverProps'
 import { useIsMobile } from 'nft/hooks'
@@ -128,7 +128,7 @@ function useLineItem(props: SwapLineItemProps): LineItemData | undefined {
          if (isPreview) return <Loading />
          return (
            <Row gap="4px">
-              <img src={getChainInfo(chainId)?.logoUrl} alt="gas cost icon" width={16} height={16} />
+              <ChainLogo chainId={chainId} />
              {formatNumber({ input: trade.totalGasUseEstimateUSD, type: NumberType.FiatGasPrice })}
            </Row>
          )

--- a/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap
@@ -399,12 +399,35 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
                  <div
                    class="c2 c10"
                  >
-                    <img
-                      alt="gas cost icon"
+                    <svg
+                      aria-labelledby="titleID"
                      height="16"
-                      src="ethereum-logo.png"
                      width="16"
-                    />
+                    >
+                      <title
+                        id="titleID"
+                      >
+                        Ethereum logo
+                      </title>
+                      <rect
+                        fill="#F9F9F9"
+                        height="16"
+                        rx="4"
+                        width="16"
+                      />
+                      <rect
+                        fill="#6B8AFF33"
+                        height="16"
+                        rx="4"
+                        width="16"
+                      />
+                      <svg
+                        height="16"
+                        width="16"
+                      >
+                        ethereum.svg
+                      </svg>
+                    </svg>
                    $1.00
                  </div>
                </div>

--- a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
@@ -198,12 +198,35 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
          <div
            class="c0 c7"
          >
-            <img
-              alt="gas cost icon"
+            <svg
+              aria-labelledby="titleID"
              height="16"
-              src="ethereum-logo.png"
              width="16"
-            />
+            >
+              <title
+                id="titleID"
+              >
+                Ethereum logo
+              </title>
+              <rect
+                fill="#F9F9F9"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <rect
+                fill="#6B8AFF33"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <svg
+                height="16"
+                width="16"
+              >
+                ethereum.svg
+              </svg>
+            </svg>
            $0.00
          </div>
        </div>
@@ -1199,12 +1222,35 @@ exports[`SwapLineItem.tsx exact input 1`] = `
          <div
            class="c0 c7"
          >
-            <img
-              alt="gas cost icon"
+            <svg
+              aria-labelledby="titleID"
              height="16"
-              src="ethereum-logo.png"
              width="16"
-            />
+            >
+              <title
+                id="titleID"
+              >
+                Ethereum logo
+              </title>
+              <rect
+                fill="#F9F9F9"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <rect
+                fill="#6B8AFF33"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <svg
+                height="16"
+                width="16"
+              >
+                ethereum.svg
+              </svg>
+            </svg>
            $1.00
          </div>
        </div>
@@ -2629,12 +2675,35 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
          <div
            class="c0 c7"
          >
-            <img
-              alt="gas cost icon"
+            <svg
+              aria-labelledby="titleID"
              height="16"
-              src="ethereum-logo.png"
              width="16"
-            />
+            >
+              <title
+                id="titleID"
+              >
+                Ethereum logo
+              </title>
+              <rect
+                fill="#F9F9F9"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <rect
+                fill="#6B8AFF33"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <svg
+                height="16"
+                width="16"
+              >
+                ethereum.svg
+              </svg>
+            </svg>
            $1.00
          </div>
        </div>
@@ -4059,12 +4128,35 @@ exports[`SwapLineItem.tsx exact output 1`] = `
          <div
            class="c0 c7"
          >
-            <img
-              alt="gas cost icon"
+            <svg
+              aria-labelledby="titleID"
              height="16"
-              src="ethereum-logo.png"
              width="16"
-            />
+            >
+              <title
+                id="titleID"
+              >
+                Ethereum logo
+              </title>
+              <rect
+                fill="#F9F9F9"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <rect
+                fill="#6B8AFF33"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <svg
+                height="16"
+                width="16"
+              >
+                ethereum.svg
+              </svg>
+            </svg>
            -
          </div>
        </div>
@@ -5489,12 +5581,35 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
          <div
            class="c0 c7"
          >
-            <img
-              alt="gas cost icon"
+            <svg
+              aria-labelledby="titleID"
              height="16"
-              src="ethereum-logo.png"
              width="16"
-            />
+            >
+              <title
+                id="titleID"
+              >
+                Ethereum logo
+              </title>
+              <rect
+                fill="#F9F9F9"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <rect
+                fill="#6B8AFF33"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <svg
+                height="16"
+                width="16"
+              >
+                ethereum.svg
+              </svg>
+            </svg>
            $1.00
          </div>
        </div>
@@ -7125,12 +7240,35 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
          <div
            class="c0 c7"
          >
-            <img
-              alt="gas cost icon"
+            <svg
+              aria-labelledby="titleID"
              height="16"
-              src="ethereum-logo.png"
              width="16"
-            />
+            >
+              <title
+                id="titleID"
+              >
+                Ethereum logo
+              </title>
+              <rect
+                fill="#F9F9F9"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <rect
+                fill="#6B8AFF33"
+                height="16"
+                rx="4"
+                width="16"
+              />
+              <svg
+                height="16"
+                width="16"
+              >
+                ethereum.svg
+              </svg>
+            </svg>
            $1.00
          </div>
        </div>

--- a/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap
+++ b/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap
@@ -281,12 +281,35 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
            <div
              class="c2 c13"
            >
-              <img
-                alt="gas cost icon"
+              <svg
+                aria-labelledby="titleID"
                height="16"
-                src="ethereum-logo.png"
                width="16"
-              />
+              >
+                <title
+                  id="titleID"
+                >
+                  Ethereum logo
+                </title>
+                <rect
+                  fill="#F9F9F9"
+                  height="16"
+                  rx="4"
+                  width="16"
+                />
+                <rect
+                  fill="#6B8AFF33"
+                  height="16"
+                  rx="4"
+                  width="16"
+                />
+                <svg
+                  height="16"
+                  width="16"
+                >
+                  ethereum.svg
+                </svg>
+              </svg>
              $1.00
            </div>
          </div>

--- a/src/constants/chainInfo.ts
+++ b/src/constants/chainInfo.ts
 import { ChainId } from '@uniswap/sdk-core'
-import bnbCircleLogoUrl from 'assets/images/bnbCircle.svg'
-import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
-import polygonCircleLogoUrl from 'assets/images/polygonCircle.png'
-import { default as arbitrumCircleLogoUrl, default as arbitrumLogoUrl } from 'assets/svg/arbitrum_logo.svg'
-import avaxLogo from 'assets/svg/avax_logo.svg'
-import avaxSquareLogo from 'assets/svg/avax_square_logo.svg'
-import baseLogo from 'assets/svg/base_logo.svg'
-import baseSquareLogo from 'assets/svg/base_square_logo.svg'
-import bnbSquareLogoUrl from 'assets/svg/bnb_square_logo.svg'
-import bnbLogo from 'assets/svg/bnb-logo.svg'
-import celoLogo from 'assets/svg/celo_logo.svg'
-import celoSquareLogoUrl from 'assets/svg/celo_square_logo.svg'
-import optimismSquareLogoUrl from 'assets/svg/optimism_square_logo.svg'
-import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg'
-import polygonSquareLogoUrl from 'assets/svg/polygon_square_logo.svg'
-import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg'
 import ms from 'ms'
 import { darkTheme } from 'theme/colors'

@@ -46,9 +30,6 @@ interface BaseChainInfo {
  readonly bridge?: string
  readonly explorer: string
  readonly infoLink: string
-  readonly logoUrl: string
-  readonly circleLogoUrl?: string
-  readonly squareLogoUrl?: string
  readonly label: string
  readonly helpCenterUrl?: string
  readonly nativeCurrency: {
@@ -83,7 +64,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/',
    label: 'Ethereum',
-    logoUrl: ethereumLogoUrl,
    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
    color: darkTheme.chain_1,
  },
@@ -93,7 +73,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://goerli.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/',
    label: 'Görli',
-    logoUrl: ethereumLogoUrl,
    nativeCurrency: { name: 'Görli Ether', symbol: 'görETH', decimals: 18 },
    color: darkTheme.chain_5,
  },
@@ -103,7 +82,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://sepolia.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/',
    label: 'Sepolia',
-    logoUrl: ethereumLogoUrl,
    nativeCurrency: { name: 'Sepolia Ether', symbol: 'SepoliaETH', decimals: 18 },
    color: darkTheme.chain_5,
  },
@@ -116,10 +94,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://optimistic.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/optimism/',
    label: 'Optimism',
-    logoUrl: optimismLogoUrl,
-    // Optimism perfers same icon for both
-    circleLogoUrl: optimismLogoUrl,
-    squareLogoUrl: optimismSquareLogoUrl,
    statusPage: 'https://optimism.io/status',
    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
@@ -135,7 +109,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://goerli-optimism.etherscan.io/',
    infoLink: 'https://info.uniswap.org/#/optimism/',
    label: 'Optimism Görli',
-    logoUrl: optimismLogoUrl,
    statusPage: 'https://optimism.io/status',
    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137778-uniswap-on-optimistic-ethereum-oξ',
    nativeCurrency: { name: 'Optimism Goerli Ether', symbol: 'görOpETH', decimals: 18 },
@@ -149,8 +122,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://arbiscan.io/',
    infoLink: 'https://info.uniswap.org/#/arbitrum',
    label: 'Arbitrum',
-    logoUrl: arbitrumLogoUrl,
-    circleLogoUrl: arbitrumCircleLogoUrl,
    defaultListUrl: ARBITRUM_LIST,
    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
@@ -165,7 +136,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://goerli.arbiscan.io/',
    infoLink: 'https://info.uniswap.org/#/arbitrum/',
    label: 'Arbitrum Goerli',
-    logoUrl: arbitrumLogoUrl,
    defaultListUrl: ARBITRUM_LIST, // TODO: use arbitrum goerli token list
    helpCenterUrl: 'https://help.uniswap.org/en/collections/3137787-uniswap-on-arbitrum',
    nativeCurrency: { name: 'Goerli Arbitrum Ether', symbol: 'goerliArbETH', decimals: 18 },
@@ -179,9 +149,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://polygonscan.com/',
    infoLink: 'https://info.uniswap.org/#/polygon/',
    label: 'Polygon',
-    logoUrl: polygonMaticLogo,
-    circleLogoUrl: polygonCircleLogoUrl,
-    squareLogoUrl: polygonSquareLogoUrl,
    nativeCurrency: { name: 'Polygon Matic', symbol: 'MATIC', decimals: 18 },
    color: darkTheme.chain_137,
    backgroundColor: darkTheme.chain_137_background,
@@ -194,7 +161,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://mumbai.polygonscan.com/',
    infoLink: 'https://info.uniswap.org/#/polygon/',
    label: 'Polygon Mumbai',
-    logoUrl: polygonMaticLogo,
    nativeCurrency: { name: 'Polygon Mumbai Matic', symbol: 'mMATIC', decimals: 18 },
  },
  [ChainId.CELO]: {
@@ -205,9 +171,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://celoscan.io/',
    infoLink: 'https://info.uniswap.org/#/celo/',
    label: 'Celo',
-    logoUrl: celoLogo,
-    circleLogoUrl: celoLogo,
-    squareLogoUrl: celoSquareLogoUrl,
    nativeCurrency: { name: 'Celo', symbol: 'CELO', decimals: 18 },
    defaultListUrl: CELO_LIST,
  },
@@ -219,7 +182,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://alfajores-blockscout.celo-testnet.org/',
    infoLink: 'https://info.uniswap.org/#/celo/',
    label: 'Celo Alfajores',
-    logoUrl: celoLogo,
    nativeCurrency: { name: 'Celo', symbol: 'CELO', decimals: 18 },
    defaultListUrl: CELO_LIST,
  },
@@ -231,9 +193,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://bscscan.com/',
    infoLink: 'https://info.uniswap.org/#/bnb/',
    label: 'BNB Chain',
-    logoUrl: bnbLogo,
-    circleLogoUrl: bnbCircleLogoUrl,
-    squareLogoUrl: bnbSquareLogoUrl,
    nativeCurrency: { name: 'BNB', symbol: 'BNB', decimals: 18 },
    defaultListUrl: PLASMA_BNB_LIST,
    color: darkTheme.chain_56,
@@ -247,9 +206,6 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://snowtrace.io/',
    infoLink: 'https://info.uniswap.org/#/avax/', // TODO(WEB-2336): Add avax support to info site
    label: 'Avalanche',
-    logoUrl: avaxLogo,
-    circleLogoUrl: avaxLogo,
-    squareLogoUrl: avaxSquareLogo,
    nativeCurrency: { name: 'AVAX', symbol: 'AVAX', decimals: 18 },
    defaultListUrl: AVALANCHE_LIST,
    color: darkTheme.chain_43114,
@@ -264,10 +220,7 @@ const CHAIN_INFO: ChainInfoMap = {
    explorer: 'https://basescan.org/',
    infoLink: 'https://info.uniswap.org/#/base/',
    label: 'Base',
-    logoUrl: baseLogo,
    statusPage: 'https://status.base.org/',
-    circleLogoUrl: baseLogo,
-    squareLogoUrl: baseSquareLogo,
    nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
    color: darkTheme.chain_84531,
  },

--- a/src/graphql/data/util.tsx
+++ b/src/graphql/data/util.tsx
@@ -117,7 +117,8 @@ export function gqlToCurrency(token: {
 }): Currency | undefined {
  const chainId = supportedChainIdFromGQLChain(token.chain)
  if (!chainId) return undefined
-  if (token.standard === TokenStandard.Native || !token.address) return nativeOnChain(chainId)
+  if (token.standard === TokenStandard.Native || token.address === 'NATIVE' || !token.address)
+    return nativeOnChain(chainId)
  else return new Token(chainId, token.address, token.decimals ?? 18, token.symbol, token.name)
 }


--- a/src/pages/PoolDetails/PoolDetailsHeader.tsx
+++ b/src/pages/PoolDetails/PoolDetailsHeader.tsx
@@ -2,8 +2,8 @@ import { Trans } from '@lingui/macro'
 import { ChainId, Currency } from '@uniswap/sdk-core'
 import blankTokenUrl from 'assets/svg/blank_token.svg'
 import Column from 'components/Column'
+import { ChainLogo } from 'components/Logo/ChainLogo'
 import Row from 'components/Row'
-import { getChainInfo } from 'constants/chainInfo'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useCurrency } from 'hooks/Tokens'
 import useTokenLogoSource from 'hooks/useAssetLogoSource'
@@ -116,8 +116,8 @@ function DoubleCurrencyAndChainLogo({
  )
 }

-const L2LogoContainer = styled.div<{ hasSquareLogo?: boolean }>`
-  background-color: ${({ theme, hasSquareLogo }) => (hasSquareLogo ? theme.surface2 : theme.neutral1)};
+const L2LogoContainer = styled.div`
+  background-color: ${({ theme }) => theme.surface2};
  border-radius: 2px;
  height: 12px;
  left: 60%;
@@ -130,29 +130,12 @@ const L2LogoContainer = styled.div<{ hasSquareLogo?: boolean }>`
  justify-content: center;
 `

-const StyledChainLogo = styled.img`
-  height: 12px;
-  width: 12px;
-`
-
-const SquareChainLogo = styled.img`
-  height: 100%;
-  width: 100%;
-`
-
 function SquareL2Logo({ chainId }: { chainId: ChainId }) {
  if (chainId === ChainId.MAINNET) return null
-  const { squareLogoUrl, logoUrl } = getChainInfo(chainId)
-
-  const chainLogo = squareLogoUrl ?? logoUrl

  return (
-    <L2LogoContainer hasSquareLogo={!!squareLogoUrl}>
-      {squareLogoUrl ? (
-        <SquareChainLogo src={chainLogo} alt="chainLogo" />
-      ) : (
-        <StyledChainLogo src={chainLogo} alt="chainLogo" />
-      )}
+    <L2LogoContainer>
+      <ChainLogo chainId={chainId} size={12} />
    </L2LogoContainer>
  )
 }