If you want to easily tint SVG/PNG/JPG icons with Tailwind, I built a small plugin that leverages CSS filter to approximate colors: tailwind-tint-color.

Usage

<!-- Palette color -->
<img src="/icons/heart.svg" class="tint-red-500" alt="red icon" />

<!-- Arbitrary colors -->
<img src="/icons/heart.svg" class="tint-[#ff6b6b]" alt="custom tint" />
<img src="/icons/heart.png" class="tint-[rgb(34,197,94)]" alt="rgb tint" />

The plugin generates the proper invert/sepia/saturate/hue-rotate/brightness/contrast chain so the icon matches the target color. It works across SVG, PNG, and JPG.

👉 npm package: tailwind-tint-color