Imported from lennondotw/skills (skills/icon-opacity-on-layer/SKILL.md). Install upstream with npx skills add lennondotw/skills --skill icon-opacity-on-layer. Copyright stays with the author.

Icon Opacity on Layer

Rule

• SVG stroke / fill use a fully opaque currentColor.
• Apply transparency with opacity on the icon's container (the <svg> or its wrapper), not by giving the inherited color its own alpha channel (e.g. text-black/40).

Why

If each stroke carries its own alpha, overlapping pixels composite alpha twice:

α_total = 1 − (1 − α)²   // e.g. α=0.4 → 0.64 at intersections

The overlap appears noticeably darker than the rest of the icon. Moving transparency up to the layer ensures the whole icon is flattened first, then the single layer alpha is applied — every pixel gets one alpha pass, so intersections match the rest.

Pattern

// ✗ alpha on currentColor → double-composite at path intersections
<svg className="text-black/40">
  <path stroke="currentColor" ... />
  <path stroke="currentColor" ... />
</svg>

// ✓ opaque color, opacity on the layer
<svg className="text-black opacity-40 dark:text-white">
  <path stroke="currentColor" ... />
  <path stroke="currentColor" ... />
</svg>