SVG icons are the standard for web iconography. They scale perfectly, support animation, and can be styled with CSS. But icons with hardcoded fill colors create maintenance nightmares when your palette changes or when users switch to dark mode.
The currentColor Technique
The simplest and most powerful approach: set fill="currentColor" on your SVG paths. The icon inherits whatever color property is set on its parent element. Put an icon inside a nav link and it automatically matches the link text color. Change the link's hover color and the icon changes with it. Zero maintenance.
CSS Custom Properties in SVGs
For multi-color icons, use CSS custom properties as fill values: fill="var(--color-primary)". This connects the icon directly to your design token system. When the primary color changes (or dark mode activates), the icon updates automatically.
Inline SVG vs. External SVG
CSS-based coloring only works with inline SVGs or SVGs loaded via <use> references. SVGs loaded as <img> sources cannot be styled with CSS. For icons that need to respond to your color system, always use inline SVG or a sprite sheet with <use>.
Dark Mode Icon Strategy
If your icons use currentColor, dark mode is handled automatically because the text color changes and icons follow. If icons use explicit fills, you need to override them in your dark mode stylesheet: [data-theme="dark"] .icon path { fill: var(--color-primary-dark); }.
fill="currentColor" for single-color icons. Use CSS custom properties for multi-color icons. Never use hardcoded hex values in production SVGs. Your PaletteRx CSS variable names become your SVG fill values.