Description
The two card brand SVG asset folders have internal inconsistencies and differ significantly from each other, making it difficult to mix-and-match when higher fidelity is needed.
payment-method-icons/ inconsistencies
All files are 39x25 with white bg and a border, but:
| Brand |
Border |
Corner radius |
| Visa |
stroke="#DDD" |
rx="1.5" |
| Mastercard |
stroke="#DDD" |
rx="1.5" |
| Amex |
stroke="#000" opacity=".07" |
rx="2" |
| Discover |
stroke="#000" opacity=".07" |
rx="2" |
Visa/MC use a light gray border with 1.5px radius. Amex/Discover use a dark border at 7% opacity with 2px radius. Should be unified.
cards/ inconsistencies
| Brand |
Dimensions |
Border |
Corner radius |
Background |
| Visa |
64x40 |
none |
rx="3" |
fill="white" |
| Mastercard |
64x40 |
none |
none (square corners) |
fill="white" |
| Amex |
64x40 |
none |
rx="3" |
fill="white" |
| Discover |
95.69x62.85 (viewBox) |
none |
none |
none |
Mastercard is missing rounded corners. Discover has different dimensions and no background fill.
cards/ vs payment-method-icons/ Visa color mismatch
The Visa wordmark blue differs between the two sets:
payment-method-icons/visa.svg: #1A1F71 (dark navy)cards/visa.svg: #1C34C3 (brighter blue)
Impact
Currently the WooPay button preferred card feature uses payment-method-icons/ for consistency, but the Visa logo has noticeably lower path fidelity than the cards/ version (836 vs 1,452 path chars). Swapping to cards/ would improve quality but introduce visual inconsistency (no border, different radius) alongside the other brands.
Suggested fix
- Normalize
payment-method-icons/: unify border color and corner radius across all four brands
- Normalize
cards/: add rounded corners to Mastercard, fix Discover dimensions/bg to match the others
- Optionally upgrade the Visa path data in
payment-method-icons/ with the higher-fidelity paths from cards/ while keeping the consistent 39x25 frame and border styling
Files
assets/images/payment-method-icons/{visa,mastercard,amex,discover}.svgassets/images/cards/{visa,mastercard,amex,discover}.svg
Description
The two card brand SVG asset folders have internal inconsistencies and differ significantly from each other, making it difficult to mix-and-match when higher fidelity is needed.
payment-method-icons/inconsistenciesAll files are 39x25 with white bg and a border, but:
stroke="#DDD"rx="1.5"stroke="#DDD"rx="1.5"stroke="#000" opacity=".07"rx="2"stroke="#000" opacity=".07"rx="2"Visa/MC use a light gray border with 1.5px radius. Amex/Discover use a dark border at 7% opacity with 2px radius. Should be unified.
cards/inconsistenciesrx="3"fill="white"fill="white"rx="3"fill="white"Mastercard is missing rounded corners. Discover has different dimensions and no background fill.
cards/vspayment-method-icons/Visa color mismatchThe Visa wordmark blue differs between the two sets:
payment-method-icons/visa.svg:#1A1F71(dark navy)cards/visa.svg:#1C34C3(brighter blue)Impact
Currently the WooPay button preferred card feature uses
payment-method-icons/for consistency, but the Visa logo has noticeably lower path fidelity than thecards/version (836 vs 1,452 path chars). Swapping tocards/would improve quality but introduce visual inconsistency (no border, different radius) alongside the other brands.Suggested fix
payment-method-icons/: unify border color and corner radius across all four brandscards/: add rounded corners to Mastercard, fix Discover dimensions/bg to match the otherspayment-method-icons/with the higher-fidelity paths fromcards/while keeping the consistent 39x25 frame and border stylingFiles
assets/images/payment-method-icons/{visa,mastercard,amex,discover}.svgassets/images/cards/{visa,mastercard,amex,discover}.svg