How to how to build a tailwind-first svg icon library
- Step 1Design icons for currentColor — In Figma, use a single colour for all icon strokes and fills. The Tailwind converter will replace it with currentColor, making the icon respond to the parent text-* class.
- Step 2Convert to fill-current via batch API — Run all icons through the JAD Tailwind converter with convert_all_fills_to_current: true. Every fill and stroke becomes currentColor — controlled by the parent text-* class.
- Step 3Add sizing via viewBox — Ensure all icons have a consistent viewBox (e.g., 0 0 24 24) and no fixed width/height. Consumers size icons with Tailwind: SearchIcon class='w-5 h-5 text-gray-600'.
Frequently asked questions
How do I handle icons with intentional multi-color design?+
Map the secondary color to a specific Tailwind class (e.g., text-blue-500) and the primary color to fill-current. The primary follows the parent; the secondary is fixed.
Should icon components set their own default size?+
Use className='w-6 h-6' as a default that consumers can override. Never use inline width/height attributes — they block Tailwind utility overrides.
How do I handle icons in disabled button states?+
Use Tailwind's group modifier: add group to the button and group-disabled:text-gray-400 to the icon. When the button is disabled, the icon color changes automatically.
What is the best way to document a Tailwind icon library?+
Use Storybook with a Tailwind preset. Create a story for each icon at multiple sizes and colors, and an all-icons grid story for visual reference.
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.