Make Hot, Disabled and Dark Theme Icon Versions in One Pass

Most toolbar icons live three or four lives: the normal state, the hover state, the disabled state, and a version for the dark theme. The Editor's Icon menu has had commands for those for a long time, one icon at a time. IconVectors 2.1+ runs the same commands on a whole folder with Make Icon Versions, and writes the variants next to the originals with a suffix you choose.

This guide is for IconVectors 2.1+ on Windows, and on macOS and Linux once 2.10 reaches them. The originals are never modified by this command, so it is one of the few batches you can run without copying the folder first.

1. Select the saved icons

Press F5 for the Icon Explorer, open the folder, and select the icons. Ctrl+A selects everything visible, and the Filter box narrows the grid to a name fragment such as toolbar- first. The icons must be saved: a selected file that is open in the Editor with unsaved changes stops the batch until you save it or take it out of the selection.

2. Choose the versions and their suffixes

Open Explorer -> Batch Processing -> Make Icon Versions.... Tick one or more of Hot, Disabled and Dark Theme. Beside each enabled version is its filename suffix: -hot, -disabled and -dark at first, so alert.svg becomes alert-hot.svg and alert-dark.svg. Type something else if your build expects it (_hover, .dark, anything). Underscores and other characters are kept exactly as you enter them.

A suffix may be empty, which keeps the source name. That only makes sense with a different output folder, for example a dark/ folder that mirrors the light one, and the dialog will not let two empty suffixes collide.

3. Pick the output folder

Choose where the variants go. The same folder as the sources is fine when you use suffixes. A separate folder is cleaner when a build script picks up a whole directory, and it is required if you keep the source names. Replace existing files is off at first; turn it on only when you are regenerating an earlier run. A version can never overwrite a source, another planned output or the document open in the Editor, so a collision has to be solved by changing the suffix or the folder.

4. Preview and read the counts

Click Preview Changes. The confirmation shows a representative original beside its versions, the source counts, the complete list of destinations and how many existing files would be replaced. Three things worth checking:

• The Dark Theme sample. Inverting lightness keeps hue and saturation, which works for most line and flat icons, but it is not a contrast guarantee. A mid-gray icon stays mid-gray.
• Icons painted with currentColor. The keyword stays symbolic, so those files come out unchanged in color; the theme is supposed to color them anyway.
• The destination list, for names you did not expect. Back returns you to the options with everything kept.

5. Write the versions

Click Make Icon Versions. The outputs are staged and then committed, and a failure rolls the set back and reports any recovery file it had to keep. There is no Editor Undo entry, because nothing was edited: the originals are untouched, and to redo a run you delete the outputs and run it again.

Explorer refreshes when the batch finishes. Double-click a -dark file to open it over a dark background in the Editor, then F5 back to the grid. The settings and suffixes are remembered for next time, so adding a new icon to the set later is select, open the dialog, preview, apply.

How the three versions are made

Each version starts from the original and runs the matching Icon menu command, so a batch result is identical to what you would get by hand. Hot changes the color levels to brighten the icon. Disabled desaturates it and applies the existing disabled opacity. Dark Theme inverts lightness while preserving hue and saturation, which turns a dark glyph into a light one and leaves a saturated accent color recognizable. Because every version is computed from the source, the order of the checkboxes does not matter and a disabled version is never a desaturated hot version.

If you prefer one SVG that adapts to the theme instead of a second file, the better tool is currentColor; see Make an Icon Set Theme-Aware with currentColor and Replace Colors. The two approaches combine well: convert the glyphs to currentColor, then generate Hot and Disabled versions for the parts that keep a fixed color.

Download the IconVectors 2.10 trial for Windows and run it on a folder of toolbar icons; the originals stay as they are.