Make an Icon Set Theme-Aware with currentColor and Replace Colors

An icon set with hard-coded colors is a set you will recolor twice: once for the dark theme and again when the brand blue changes. The usual answer is currentColor, the SVG keyword that makes a paint inherit the CSS color of the parent, and the tutorial Make SVG Icons Themeable with CSS shows how to do that for one icon. IconVectors 2.1+ does it for a folder with two batch commands: Convert to currentColor for the symbolic conversion, and Replace Colors when you just need one exact color swapped everywhere.

This guide is for IconVectors 2.1+ (Windows first; macOS and Linux follow with 2.10). Both commands rewrite the selected files in place, and that has no Editor Undo, so step 1 copies the folder. Read it even if you have run batches before.

1. Copy the folder, then select the icons

Open the Icon Explorer with F5, go to the folder, select the icons and right-click Group in Folder..., leaving the move option off. Explorer copies the files into a new child folder and opens it. Run the batch there. Apply does stage and validate the output and rolls back on failure, but a batch that succeeds with the wrong settings is a batch you cannot undo, and a folder in version control is the other acceptable safety net.

In the copy, select the icons again (Ctrl+A). A source that is open in the Editor blocks the whole batch; close it first.

2. Decide which command you need

• Convert to currentColor when the icon set is monochrome or should become monochrome, and the UI will color it with CSS. All solid fills and strokes collapse into one symbolic paint.
• Replace Colors when the icons keep their colors and one of them has to change: an old brand red to the new one, pure black to the design system's near-black, or the reverse of a conversion, currentColor back to a fixed color.
• Neither, when you want to map a whole set to a palette; that is Apply Palette, covered in Batch Process SVG Icons with Icon Explorer.

3. Convert to currentColor

Choose Explorer -> Batch Processing -> Convert to currentColor.... Keep All solid colors for a monochrome set. Choose One selected color when a two-tone set should keep its accent: the list shows the exact RGB values found in the selection (different spellings and alphas of the same RGB count as one entry) and you pick the one to convert. Then choose fills, strokes or both.

The Preview color, black at first, is only the fallback used to draw the previews. It never ends up in the files. What does end up in the files: inherited colors and the implicit black fill are converted, transparency is kept by folding the paint alpha into the fill or stroke opacity, and none, gradients, patterns and already symbolic paints stay as they are. An absent stroke is never invented.

One trap. An SVG that already declares its own color property keeps it, which ties the converted paints to that fixed color instead of the page. The preview warns about it; remove the declaration in the Editor if you want the icon to follow the page.

4. Replace Colors

Choose Explorer -> Batch Processing -> Replace Colors.... Color to replace is a drop-down of the distinct fill and stroke colors detected in the selection, each with a swatch and its hex value; currentColor appears as its own entry when present. Pick the source, set the Replacement color, and limit the scope to fills, strokes or both.

Matching is exact. #F00, #ff0000, rgb(255,0,0) and red are the same source color; a color that differs by one unit is not. There is no tolerance, which is a feature: it is how you can replace a brand color and be sure the shadow gray next to it did not move. Gradient stops, patterns, filter colors and the SVG color property are not touched. The replacement is always a solid RGB value; to go the other way, use step 3.

5. Preview, read the per-file list, apply

Both dialogs end in Preview Changes. The confirmation shows the options, the selected and hidden counts, how many files change and how many stay unchanged, a before and after sample, and a per-file list with diagnostics. Read the unchanged entries. A file that stays unchanged in a currentColor batch is usually already symbolic, or painted with a gradient, or using CSS the batch does not rewrite. Unsupported files are reported, not half-converted.

Only Convert to currentColor or Process writes anything. Output is staged, validated and then committed over the originals, with rollback if a file fails. Files that would not change keep their exact bytes and timestamps, which keeps version control quiet.

6. Check one icon in context

Double-click a converted icon to open it in the Editor; it renders in the Editor's own fallback color, which is expected. The real test is the page: drop the SVG inline into a component with color: #333 and then into one with color: white, as in the CSS tutorial, and confirm it follows. For a Replace Colors run, open an icon that had both the old color and a neighbor color, and check that only the old one moved.

What the batches write

In 2.10 both commands edit the attribute or inline style that actually controls the paint, instead of stacking a new override on top. A paint inherited from a group gets a local override on the element, and parent declarations, shared stylesheet rules and resources are left as they are. Geometry, IDs, metadata and comments are untouched. If you want the files smaller afterwards, that is a separate command: Shrink an Icon Library with Optimize SVG Files.

From an MCP client the same two commands are explorer_batch_convert_to_current_color and explorer_batch_replace_colors, each with a plan and an apply step. Download the IconVectors 2.10 trial for Windows and try the conversion on a copy of a dozen icons.