How to svg theming: tailwind fill-current vs. css custom properties
- Step 1Assess your icon color complexity — Single-color icons: fill-current is sufficient and simpler. Multi-color icons needing independent control: CSS custom properties offer more flexibility.
- Step 2Consider your tooling — Tailwind-first projects: fill-current is the natural fit. CSS-first or non-Tailwind projects: CSS custom properties are more universal.
- Step 3Choose and standardise — Pick one approach and apply it consistently across your icon library. Mixing approaches creates inconsistency in how consumers control icon colours.
Frequently asked questions
Can I use both fill-current and CSS custom properties in the same SVG?+
Yes but it's confusing. A cleaner approach: fill-current for icons that should always match the parent text color, CSS custom properties for icons with independent color identity.
Which approach works better with Tailwind's dark mode?+
fill-current works naturally — add dark:text-white to the parent and the icon turns white. CSS custom properties require a separate dark mode override in your CSS variables.
Can CSS custom properties be used inside SVGs used as img?+
No. SVGs as img src or background-image cannot read the document's CSS variables. Only inline SVG (in HTML directly) can access document custom properties.
Which is better for an npm icon library consumed across projects?+
CSS custom properties are more portable — they work without Tailwind. Use var(--icon-color, currentColor): currentColor as default ensures it works in both Tailwind and non-Tailwind projects.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.