diff --git a/apps/cowswap-frontend/src/common/pure/ApproveButton/index.tsx b/apps/cowswap-frontend/src/common/pure/ApproveButton/index.tsx
index ec46bb5932..05a75609be 100644
--- a/apps/cowswap-frontend/src/common/pure/ApproveButton/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/ApproveButton/index.tsx
@@ -1,5 +1,6 @@
 import { useContext, useMemo } from 'react'
 
+import { TokenLogo } from '@cowprotocol/tokens'
 import { ButtonSize, Loader, TokenSymbol, AutoRow, ButtonConfirmed } from '@cowprotocol/ui'
 import { MouseoverTooltip } from '@cowprotocol/ui'
 import { Currency } from '@uniswap/sdk-core'
@@ -10,8 +11,6 @@ import { ThemeContext } from 'styled-components/macro'
 
 import { ApprovalState } from 'legacy/hooks/useApproveCallback/useApproveCallbackMod'
 
-import { TokenLogo } from 'modules/tokensList'
-
 export interface ApproveButtonProps {
   currency: Currency | undefined | null
   state: ApprovalState
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx
index 1f487c7f38..b456b740c3 100644
--- a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx
@@ -1,11 +1,10 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 import { Currency } from '@uniswap/sdk-core'
 
 import { Trans } from '@lingui/macro'
 import { Nullish } from 'types'
 
-import { TokenLogo } from 'modules/tokensList'
-
 import * as styledEl from './styled'
 
 export interface CurrencySelectButtonProps {
diff --git a/apps/cowswap-frontend/src/common/pure/IconSpinner/index.tsx b/apps/cowswap-frontend/src/common/pure/IconSpinner/index.tsx
index a8a2ea1911..e6800ca65c 100644
--- a/apps/cowswap-frontend/src/common/pure/IconSpinner/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/IconSpinner/index.tsx
@@ -1,9 +1,8 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { Currency } from '@uniswap/sdk-core'
 
 import styled from 'styled-components/macro'
 
-import { TokenLogo } from 'modules/tokensList'
-
 import { UI } from 'common/constants/theme'
 
 interface IconSpinnerProps {
diff --git a/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts b/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
index 144f2b3b48..d87b2aea4c 100644
--- a/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
@@ -1,3 +1,4 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { BaseButton } from '@cowprotocol/ui'
 
 import { transparentize } from 'polished'
@@ -5,8 +6,6 @@ import { HelpCircle } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components/macro'
 
-import { TokenLogo } from 'modules/tokensList'
-
 import { UI } from 'common/constants/theme'
 
 export const Wrapper = styled.div`
diff --git a/apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/index.tsx b/apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/index.tsx
index 1ba57afeb0..448965061d 100644
--- a/apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/index.tsx
@@ -2,6 +2,7 @@ import React, { useContext, useMemo } from 'react'
 
 import { INPUT_OUTPUT_EXPLANATION } from '@cowprotocol/common-const'
 import { isAddress, shortenAddress } from '@cowprotocol/common-utils'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { RowBetween, RowFixed, TokenAmount, TokenSymbol } from '@cowprotocol/ui'
 import { useWalletDetails } from '@cowprotocol/wallet'
 import { Percent, TradeType } from '@uniswap/sdk-core'
@@ -20,7 +21,6 @@ import TradeGp from 'legacy/state/swap/TradeGp'
 import { ThemedText } from 'legacy/theme'
 import { computeSlippageAdjustedAmounts } from 'legacy/utils/prices'
 
-import { TokenLogo } from 'modules/tokensList'
 import { NoImpactWarning } from 'modules/trade/pure/NoImpactWarning'
 import { PriceUpdatedBanner } from 'modules/trade/pure/PriceUpdatedBanner'
 import { useTradeUsdAmounts } from 'modules/usdAmount'
diff --git a/apps/cowswap-frontend/src/legacy/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx b/apps/cowswap-frontend/src/legacy/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx
index 2aa6a070be..eaf61425ba 100644
--- a/apps/cowswap-frontend/src/legacy/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/swap/UnsupportedCurrencyFooter/UnsupportedCurrencyFooterMod.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 
 import { getEtherscanLink, getWrappedToken } from '@cowprotocol/common-utils'
 import { useIsUnsupportedToken } from '@cowprotocol/tokens'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { ButtonEmpty } from '@cowprotocol/ui'
 import { AutoRow, RowBetween } from '@cowprotocol/ui'
 import { ExternalLink } from '@cowprotocol/ui'
@@ -15,8 +16,6 @@ import Card, { OutlineCard } from 'legacy/components/Card'
 import { AutoColumn } from 'legacy/components/Column'
 import { CloseIcon, ThemedText, Z_INDEX } from 'legacy/theme'
 
-import { TokenLogo } from 'modules/tokensList'
-
 import { UI } from 'common/constants/theme'
 import { Modal } from 'common/pure/Modal'
 
diff --git a/apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx b/apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx
index 33854085e9..67fdbfc189 100644
--- a/apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx
+++ b/apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx
@@ -5,6 +5,7 @@ import { ExplorerDataType, getExplorerLink, shortenAddress } from '@cowprotocol/
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useENS } from '@cowprotocol/ens'
 import { useTokenBySymbolOrAddress } from '@cowprotocol/tokens'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { ExternalLink, TokenAmount } from '@cowprotocol/ui'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
@@ -14,7 +15,6 @@ import { ActivityStatus } from 'legacy/hooks/useRecentActivity'
 import { OrderStatus } from 'legacy/state/orders/actions'
 
 import { EthFlowStepper } from 'modules/swap/containers/EthFlowStepper'
-import { TokenLogo } from 'modules/tokensList'
 
 import { UI } from 'common/constants/theme'
 import { useCancelOrder } from 'common/hooks/useCancelOrder'
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx
index ddb648fcea..04ad3f09e0 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx
@@ -5,6 +5,7 @@ import { ZERO_FRACTION } from '@cowprotocol/common-const'
 import { useTimeAgo } from '@cowprotocol/common-hooks'
 import { getAddress, getEtherscanLink } from '@cowprotocol/common-utils'
 import { OrderClass, SupportedChainId } from '@cowprotocol/cow-sdk'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { Loader, TokenAmount, TokenSymbol } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount, Percent, Price } from '@uniswap/sdk-core'
 
@@ -25,7 +26,6 @@ import {
 import { OrderActions } from 'modules/ordersTable/pure/OrdersTableContainer/types'
 import { OrderStatusBox } from 'modules/ordersTable/pure/OrderStatusBox'
 import { getIsEthFlowOrder } from 'modules/swap/containers/EthFlowStepper'
-import { TokenLogo } from 'modules/tokensList'
 
 import { useSafeMemo } from 'common/hooks/useSafeMemo'
 import { ButtonSecondary } from 'common/pure/ButtonSecondary'
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/WrapCard.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/WrapCard.tsx
index 8aa22b2a56..d0bc338d25 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/WrapCard.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/WrapCard.tsx
@@ -1,8 +1,8 @@
+import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenAmount } from '@cowprotocol/ui'
 import { CurrencyAmount, Currency } from '@uniswap/sdk-core'
 
 import * as styledEl from 'modules/swap/pure/EthFlow/WrappingPreview/styled'
-import { TokenLogo } from 'modules/tokensList'
 
 interface WrapCardProps {
   currency: Currency
diff --git a/apps/cowswap-frontend/src/modules/tokensList/containers/ManageTokens/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/containers/ManageTokens/index.tsx
index 5944043abe..b612692ac5 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/containers/ManageTokens/index.tsx
+++ b/apps/cowswap-frontend/src/modules/tokensList/containers/ManageTokens/index.tsx
@@ -1,6 +1,6 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { ExplorerDataType, getExplorerLink, isTruthy } from '@cowprotocol/common-utils'
-import { TokenSearchResponse, useRemoveTokenCallback, useResetUserTokensCallback } from '@cowprotocol/tokens'
+import { TokenLogo, TokenSearchResponse, useRemoveTokenCallback, useResetUserTokensCallback } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 
 import { ExternalLink, Trash } from 'react-feather'
@@ -9,7 +9,6 @@ import * as styledEl from './styled'
 
 import { useAddTokenImportCallback } from '../../hooks/useAddTokenImportCallback'
 import { ImportTokenItem } from '../../pure/ImportTokenItem'
-import { TokenLogo } from '../../pure/TokenLogo'
 
 export interface ManageTokensProps {
   tokens: TokenWithLogo[]
diff --git a/apps/cowswap-frontend/src/modules/tokensList/index.ts b/apps/cowswap-frontend/src/modules/tokensList/index.ts
index 8e5de14fdb..a08992407a 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/index.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/index.ts
@@ -1,6 +1,4 @@
 export { SelectTokenWidget } from './containers/SelectTokenWidget'
 export { AutoImportTokens } from './containers/AutoImportTokens'
 export { useOpenTokenSelectWidget } from './hooks/useOpenTokenSelectWidget'
-export { TokenLogo } from './pure/TokenLogo'
-export { getTokenLogoUrls } from './utils/getTokenLogoUrls'
 export { useAllTokensBalances } from './hooks/useAllTokensBalances'
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/index.tsx
index e3093f3928..49e27e13f1 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/index.tsx
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/index.tsx
@@ -1,12 +1,11 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 
 import { InfoIcon } from 'legacy/components/InfoIcon'
 
 import * as styledEl from './styled'
 
-import { TokenLogo } from '../TokenLogo'
-
 export interface FavouriteTokensListProps {
   tokens: TokenWithLogo[]
   selectedToken?: string
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx
index 75e84e2a67..b37d7f3482 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportListModal/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { getTokenListViewLink, TokenListInfo } from '@cowprotocol/tokens'
+import { TokenLogo, getTokenListViewLink, TokenListInfo } from '@cowprotocol/tokens'
 import { ButtonPrimary } from '@cowprotocol/ui'
 
 import { AlertTriangle } from 'react-feather'
@@ -8,7 +8,6 @@ import { AlertTriangle } from 'react-feather'
 import * as styledEl from './styled'
 
 import { ModalHeader } from '../ModalHeader'
-import { TokenLogo } from '../TokenLogo'
 
 export interface ImportListModalProps {
   list: TokenListInfo
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx
index 355cae5a9e..e46177406f 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ImportTokenModal/index.tsx
@@ -1,5 +1,6 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { ExplorerDataType, getExplorerLink } from '@cowprotocol/common-utils'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { ButtonPrimary } from '@cowprotocol/ui'
 
 import { AlertCircle } from 'react-feather'
@@ -7,7 +8,6 @@ import { AlertCircle } from 'react-feather'
 import * as styledEl from './styled'
 
 import { ModalHeader } from '../ModalHeader'
-import { TokenLogo } from '../TokenLogo'
 
 export interface ImportTokenModalProps {
   tokens: TokenWithLogo[]
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenInfo/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenInfo/index.tsx
index 0a1d29a59b..b6221d4b50 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenInfo/index.tsx
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenInfo/index.tsx
@@ -1,10 +1,9 @@
 import { TokenWithLogo } from '@cowprotocol/common-const'
+import { TokenLogo } from '@cowprotocol/tokens'
 import { TokenSymbol } from '@cowprotocol/ui'
 
 import * as styledEl from './styled'
 
-import { TokenLogo } from '../TokenLogo'
-
 export interface TokenInfoProps {
   token: TokenWithLogo
   className?: string
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenListDetails/index.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenListDetails/index.tsx
index 8af914dc54..8003fc7469 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenListDetails/index.tsx
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenListDetails/index.tsx
@@ -1,11 +1,10 @@
 import { ReactNode } from 'react'
 
 import { TokenListInfo } from '@cowprotocol/tokens'
+import { TokenLogo } from '@cowprotocol/tokens'
 
 import * as styledEl from './styled'
 
-import { TokenLogo } from '../TokenLogo'
-
 export interface TokenListItemProps {
   list: TokenListInfo
   className?: string
diff --git a/apps/cowswap-frontend/src/modules/tokensList/utils/getTokensByAddress.ts b/apps/cowswap-frontend/src/modules/tokensList/utils/getTokensByAddress.ts
deleted file mode 100644
index 93c306061d..0000000000
--- a/apps/cowswap-frontend/src/modules/tokensList/utils/getTokensByAddress.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NATIVE_CURRENCY_BUY_TOKEN } from '@cowprotocol/common-const'
-import { doesTokenMatchSymbolOrAddress } from '@cowprotocol/common-utils'
-import { SupportedChainId } from '@cowprotocol/cow-sdk'
-import { TokensByAddress } from '@cowprotocol/tokens'
-import { Token } from '@uniswap/sdk-core'
-
-export function getTokensByAddress(
-  chainId: SupportedChainId,
-  tokenId: string,
-  tokensByAddress: TokensByAddress
-): Token {
-  const nativeToken = NATIVE_CURRENCY_BUY_TOKEN[chainId]
-
-  if (doesTokenMatchSymbolOrAddress(nativeToken, tokenId)) {
-    return nativeToken
-  }
-
-  return tokensByAddress[tokenId.toLowerCase()]
-}
diff --git a/apps/cowswap-frontend/src/modules/tokensList/utils/tokensListSorter.ts b/apps/cowswap-frontend/src/modules/tokensList/utils/tokensListSorter.ts
index 55712ac3b6..765d8d9d78 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/utils/tokensListSorter.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/utils/tokensListSorter.ts
@@ -1,16 +1,15 @@
-import { NATIVE_CURRENCY_BUY_ADDRESS, TokenWithLogo } from '@cowprotocol/common-const'
+import { TokenWithLogo } from '@cowprotocol/common-const'
+import { getIsNativeToken } from '@cowprotocol/common-utils'
 
 import { TokenAmounts } from 'modules/tokens'
 
-const nativeTokenAddress = NATIVE_CURRENCY_BUY_ADDRESS.toLowerCase()
-
 export function tokensListSorter(balances: TokenAmounts): (a: TokenWithLogo, b: TokenWithLogo) => number {
   return (a: TokenWithLogo, b: TokenWithLogo) => {
     const aBalance = balances[a.address]
     const bBalance = balances[b.address]
 
     // Native always first
-    if (a.address.toLowerCase() === nativeTokenAddress || b.address.toLowerCase() === nativeTokenAddress) return 1
+    if (getIsNativeToken(a) || getIsNativeToken(b)) return 1
 
     if (aBalance?.value && bBalance?.value) {
       return +bBalance.value.toExact() - +aBalance.value.toExact()
diff --git a/apps/cowswap-frontend/src/modules/twap/utils/mapPartOrderToStoreOrder.ts b/apps/cowswap-frontend/src/modules/twap/utils/mapPartOrderToStoreOrder.ts
index ec42d42414..1a5989c00a 100644
--- a/apps/cowswap-frontend/src/modules/twap/utils/mapPartOrderToStoreOrder.ts
+++ b/apps/cowswap-frontend/src/modules/twap/utils/mapPartOrderToStoreOrder.ts
@@ -3,8 +3,6 @@ import { TokensByAddress } from '@cowprotocol/tokens'
 
 import { Order } from 'legacy/state/orders/actions'
 
-import { getTokensByAddress } from 'modules/tokensList/utils/getTokensByAddress'
-
 import { computeOrderSummary } from 'common/updaters/orders/utils'
 
 import { getIsLastPartOrder } from './getIsLastPartOrder'
@@ -20,7 +18,6 @@ export function mapPartOrderToStoreOrder(
   parent: TwapOrderItem,
   tokensByAddress: TokensByAddress
 ): Order {
-  const chainId = item.chainId
   const isCancelling = item.isCancelling || parent.status === TwapOrderStatus.Cancelling
   const status = getPartOrderStatus(enrichedOrder, parent, isVirtualPart)
 
@@ -33,8 +30,8 @@ export function mapPartOrderToStoreOrder(
       parentId: parent.id,
     },
     sellAmountBeforeFee: enrichedOrder.sellAmount,
-    inputToken: getTokensByAddress(chainId, enrichedOrder.sellToken, tokensByAddress),
-    outputToken: getTokensByAddress(chainId, enrichedOrder.buyToken, tokensByAddress),
+    inputToken: tokensByAddress[enrichedOrder.sellToken.toLowerCase()],
+    outputToken: tokensByAddress[enrichedOrder.buyToken.toLowerCase()],
     creationTime: enrichedOrder.creationDate,
     summary: '',
     status,
diff --git a/apps/cowswap-frontend/src/modules/twap/utils/mapTwapOrderToStoreOrder.ts b/apps/cowswap-frontend/src/modules/twap/utils/mapTwapOrderToStoreOrder.ts
index 4ce37914da..d9d04035ae 100644
--- a/apps/cowswap-frontend/src/modules/twap/utils/mapTwapOrderToStoreOrder.ts
+++ b/apps/cowswap-frontend/src/modules/twap/utils/mapTwapOrderToStoreOrder.ts
@@ -2,8 +2,6 @@ import { TokensByAddress } from '@cowprotocol/tokens'
 
 import { Order, OrderStatus } from 'legacy/state/orders/actions'
 
-import { getTokensByAddress } from 'modules/tokensList/utils/getTokensByAddress'
-
 import { computeOrderSummary } from 'common/updaters/orders/utils'
 
 import { emulateTwapAsOrder } from './emulateTwapAsOrder'
@@ -30,8 +28,8 @@ export function mapTwapOrderToStoreOrder(order: TwapOrderItem, tokensByAddress:
       id: order.id,
     },
     sellAmountBeforeFee: enrichedOrder.sellAmount,
-    inputToken: getTokensByAddress(order.chainId, enrichedOrder.sellToken, tokensByAddress),
-    outputToken: getTokensByAddress(order.chainId, enrichedOrder.buyToken, tokensByAddress),
+    inputToken: tokensByAddress[enrichedOrder.sellToken.toLowerCase()],
+    outputToken: tokensByAddress[enrichedOrder.buyToken.toLowerCase()],
     creationTime: enrichedOrder.creationDate,
     summary: '',
     status,
diff --git a/apps/cowswap-frontend/src/modules/wallet/containers/AddToMetamask/index.tsx b/apps/cowswap-frontend/src/modules/wallet/containers/AddToMetamask/index.tsx
index c90176970e..153b3d40b4 100644
--- a/apps/cowswap-frontend/src/modules/wallet/containers/AddToMetamask/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/containers/AddToMetamask/index.tsx
@@ -3,12 +3,11 @@ import React, { useCallback, useState } from 'react'
 import { addTokenToMetamaskAnalytics } from '@cowprotocol/analytics'
 import { TokenWithLogo } from '@cowprotocol/common-const'
 import { getWrappedToken } from '@cowprotocol/common-utils'
+import { getTokenLogoUrls } from '@cowprotocol/tokens'
 import { getIsMetaMask } from '@cowprotocol/wallet'
 import { Currency } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 
-import { getTokenLogoUrls } from 'modules/tokensList'
-
 import { AddToMetamask as AddToMetamaskPure } from '../../pure/AddToMetamask'
 
 export type AddToMetamaskProps = {
diff --git a/libs/tokens/src/index.ts b/libs/tokens/src/index.ts
index 7912a9b929..74831614b7 100644
--- a/libs/tokens/src/index.ts
+++ b/libs/tokens/src/index.ts
@@ -40,3 +40,7 @@ export { searchTokensInApi } from './services/searchTokensInApi'
 // Utils
 export { getTokenListViewLink } from './utils/getTokenListViewLink'
 export { getTokenSearchFilter } from './utils/getTokenSearchFilter'
+export { getTokenLogoUrls } from './utils/getTokenLogoUrls'
+
+// Pure components
+export { TokenLogo } from './pure/TokenLogo'
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenLogo/index.tsx b/libs/tokens/src/pure/TokenLogo/index.tsx
similarity index 95%
rename from apps/cowswap-frontend/src/modules/tokensList/pure/TokenLogo/index.tsx
rename to libs/tokens/src/pure/TokenLogo/index.tsx
index 0e9df68b2b..099bc7e417 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenLogo/index.tsx
+++ b/libs/tokens/src/pure/TokenLogo/index.tsx
@@ -9,15 +9,13 @@ import { Currency, NativeCurrency } from '@uniswap/sdk-core'
 import { Slash } from 'react-feather'
 import styled from 'styled-components/macro'
 
-import { UI } from 'common/constants/theme'
-
 import { getTokenLogoUrls } from '../../utils/getTokenLogoUrls'
 
 const invalidUrlsAtom = atom<{ [url: string]: boolean }>({})
 
 const TokenLogoWrapper = styled.div`
   display: inline-block;
-  background: var(${UI.COLOR_CONTAINER_BG_01});
+  background: var(--cow-container-bg-01);
   border-radius: 50%;
 `
 
diff --git a/apps/cowswap-frontend/src/modules/tokensList/utils/getTokenLogoUrls.ts b/libs/tokens/src/utils/getTokenLogoUrls.ts
similarity index 100%
rename from apps/cowswap-frontend/src/modules/tokensList/utils/getTokenLogoUrls.ts
rename to libs/tokens/src/utils/getTokenLogoUrls.ts