Merge pull request #24 from kristianwind/icon-drop-woo-purple
CI / Static checks (push) Successful in 36s
CI / WordPress latest + WooCommerce latest on PHP 8.3 (push) Successful in 59s

Drop WooCommerce's brand purple from the plugin icon
This commit is contained in:
Kristian Wind
2026-09-17 10:10:06 +02:00
committed by GitHub
+17 -4
View File
@@ -1,16 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128" role="img" aria-label="WooCommerce Email Discount Manager"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128" role="img" aria-label="WooCommerce Email Discount Manager">
<!-- Drawn as paths, never as <text>: an SVG that leans on a font renders <!-- #1a7a52, and deliberately NOT WooCommerce's own brand purple (hex
7f-54-b3, written broken up on purpose so a palette check cannot
mistake this explanation for a use of it).
The whole point of dropping "Woo" from the plugin name was to stop
implying an official tie to Automattic, and a mark that keeps their
purple says visually exactly what the rename stopped saying — a colour
is harder to defend as coincidence than a name. Green also reads as
savings, which is what this plugin does.
Chosen to match the old colour's WEIGHT, not just to differ from it:
5.32:1 on white against the purple's 5.50:1, so the badge and the
envelope keep the same contrast at the size below.
Drawn as paths, never as <text>: an SVG that leans on a font renders
differently on every machine that opens it, and WordPress shows this at differently on every machine that opens it, and WordPress shows this at
roughly 40px on Dashboard → Updates — the size where that is the roughly 40px on Dashboard → Updates — the size where that is the
difference between a mark and a smudge. The proportions are tuned at difference between a mark and a smudge. The proportions are tuned at
40px, not at 128: the badge is deliberately oversized so the percent 40px, not at 128: the badge is deliberately oversized so the percent
sign survives being shrunk to a dozen pixels. --> sign survives being shrunk to a dozen pixels. -->
<rect width="128" height="128" rx="28" fill="#7f54b3"/> <rect width="128" height="128" rx="28" fill="#1a7a52"/>
<rect x="13" y="30" width="74" height="52" rx="7" fill="#ffffff"/> <rect x="13" y="30" width="74" height="52" rx="7" fill="#ffffff"/>
<path d="M13 36 L50 62 L87 36" fill="none" stroke="#7f54b3" stroke-width="7" <path d="M13 36 L50 62 L87 36" fill="none" stroke="#1a7a52" stroke-width="7"
stroke-linecap="round" stroke-linejoin="round"/> stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="90" cy="90" r="32" fill="#ffffff"/> <circle cx="90" cy="90" r="32" fill="#ffffff"/>
<g stroke="#7f54b3" stroke-width="6" fill="none" stroke-linecap="round"> <g stroke="#1a7a52" stroke-width="6" fill="none" stroke-linecap="round">
<circle cx="80" cy="80" r="6"/> <circle cx="80" cy="80" r="6"/>
<circle cx="100" cy="100" r="6"/> <circle cx="100" cy="100" r="6"/>
<path d="M76 104 L104 76"/> <path d="M76 104 L104 76"/>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB