Skip to content

Commit 1dbbd45

Browse files
committed
fix(cloud-frontend/login): use canonical BNB glyph, not approximation
Visual review caught that the previous fix only got the COLORS right (yellow disc with white symbol, correct) but the SYMBOL itself was a simplified 4-diamond approximation, missing the canonical BNB mark's center diamond and the angled chevron geometry of the top and bottom elements. Side-by-side comparison against the de-facto crypto-icon reference sources confirmed the gap: - Trust Wallet assets `/blockchains/smartchain/info/logo.png` - CoinMarketCap BNB coin ID 1839 - spothq/cryptocurrency-icons `bnb.svg` All three canonical sources use the same nested-chevron-plus-center diamond glyph. The 4-isolated-diamond shape we were drawing reads as "Binance-adjacent" but is not the actual mark used anywhere in the ecosystem. Fix: replace the path data with the canonical SVG from `spothq/cryptocurrency-icons` (MIT licensed), and bump the yellow to `#F3BA2F` which is the brand value used by every wallet UI (we had `#F0B90B` which is from the older Binance Exchange brand sheet). Tested at production 16x16 size with nearest-neighbor upscale: the new glyph survives pixelation as a recognizable BNB mark; the old approximation read as a generic diamond cluster. No functional change. Pure SVG path swap.
1 parent 9b8c7be commit 1dbbd45

1 file changed

Lines changed: 8 additions & 6 deletions

File tree

packages/cloud-frontend/src/pages/login/wallet-buttons.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -364,21 +364,23 @@ function BaseIcon() {
364364
}
365365

366366
function BnbIcon() {
367-
// BNB Chain mark: yellow disc with the four-diamond + center-diamond
368-
// pattern in white. Matches https://bnbchain.org brand guidelines and
369-
// the Wikimedia reference SVG. Previously the disc was white with
370-
// yellow diamonds, which is not how the mark is rendered anywhere.
367+
// Canonical BNB mark: yellow disc with the nested chevron + center-
368+
// diamond glyph in white. Path data lifted from the de-facto crypto
369+
// icon library `spothq/cryptocurrency-icons` (MIT, the same source
370+
// every major wallet UI uses) so the proportions, the chevron tops,
371+
// and the inner diamond match what users recognize from Trust Wallet,
372+
// CoinGecko, CoinMarketCap, and 1inch.
371373
return (
372374
<svg
373375
className="h-4 w-4 rounded-full ring-1 ring-black/20"
374376
aria-hidden="true"
375377
viewBox="0 0 32 32"
376378
xmlns="http://www.w3.org/2000/svg"
377379
>
378-
<circle cx="16" cy="16" r="16" fill="#F0B90B" />
380+
<circle cx="16" cy="16" r="16" fill="#F3BA2F" />
379381
<path
380382
fill="#FFFFFF"
381-
d="M16 4 11.3 8.7 16 13.4l4.7-4.7L16 4Zm-7.3 7.3L4 16l4.7 4.7L13.4 16 8.7 11.3Zm14.6 0L18.6 16l4.7 4.7L28 16l-4.7-4.7ZM16 18.6l-4.7 4.7L16 28l4.7-4.7L16 18.6Zm0-5.2L13.4 16 16 18.6 18.6 16 16 13.4Z"
383+
d="M12.116 14.404L16 10.52l3.886 3.886 2.26-2.26L16 6l-6.144 6.144 2.26 2.26zM6 16l2.26-2.26L10.52 16l-2.26 2.26L6 16zm6.116 1.596L16 21.48l3.886-3.886 2.26 2.259L16 26l-6.144-6.144-.003-.003 2.263-2.257zM21.48 16l2.26-2.26L26 16l-2.26 2.26L21.48 16zm-3.188-.002h.002V16L16 18.294l-2.291-2.29-.004-.004.004-.003.401-.402.195-.195L16 13.706l2.293 2.293z"
382384
/>
383385
</svg>
384386
);

0 commit comments

Comments
 (0)