Color Inheritance with CSS `currentColor`

How do icons automatically change color when their parent button changes from resting state to hover state, or switches from light to dark mode?

The secret is the CSS keyword currentColor:

<svg stroke="currentColor" fill="none" ...>
  <path d="..." />
</svg>

When stroke="currentColor" or fill="currentColor" is set inside the SVG:

• The icon automatically inherits whatever color CSS property is active on its parent container.
• If a button has text-white hover:text-amber-300, the icon turns white and seamlessly transitions to amber on hover with zero extra JavaScript or CSS overrides!