Step 1: Recolor a single shape
Press T for the Transform tool, click the shape, and open the Appearance panel. Pick a color from the picker - Custom, Schemes, Blend, and Palette tabs - or type a hex value directly. Stroke color works the same way on the Stroke row of the Appearance panel.
Step 2: Recolor multiple shapes at once
Marquee-select multiple shapes (drag a selection rectangle), or Shift+click each one. Change Fill once and every selected shape updates. Useful for retheming an entire icon set in one operation.
Step 3: Copy formatting between shapes
To propagate one shape's appearance to others, select the source shape and choose Edit > Copy Formatting… (Ctrl+Alt+F), then select the targets and Edit > Paste Formatting (Ctrl+Alt+V). The dialog lets you choose which categories travel - fill, border and font - so you can retint without disturbing stroke weights or type.
Worth knowing before you plan around it: there is no find-and-replace for color and no "select same fill" command, so the targets are whatever you select by hand. If you find yourself doing that repeatedly, bind the color to a variable instead - step 6.
Step 4: Use currentColor for CSS theming
Set a shape's fill to "currentColor": open the XML Inspector (F12), click the shape's fill attribute value, and type currentColor. The SVG will inherit color from the surrounding CSS - so a dark-mode toggle on your site automatically retints the icon. SVGSketch preserves currentColor through editing and export rather than baking it to a literal color.
Step 5: Apply a gradient or a pattern instead of a flat color
On the Fill row of the Appearance panel, switch Type from Solid Color to Linear Gradient, Radial Gradient, Pattern or No Fill. For a gradient, add color stops, drag them to position, and adjust each stop's color and opacity; Spread controls what happens beyond the last stop (Pad, Repeat or Reflect), and Coordinate space chooses between the shape's bounding box and user space. A radial gradient additionally exposes a focal radius.
Position is edited on the canvas rather than in the panel - the panel says so: "Enter Edit mode to adjust gradient position with handles." Stroke works the same way, and Paint Order decides whether the fill or the stroke paints first.
Step 6: Bind the color to a variable to retint everything at once
This is the answer to recoloring a whole document in one edit. Open the Variables panel, add a variable of type Color, then click the fx button beside the Fill swatch on each shape that should follow it and pick that variable. The fill is written as var(--name), and changing the variable's value retints every shape bound to it.
The reference survives export: the file carries fill="var(--brand)" plus a <style> block declaring the token, so the same substitution works wherever the SVG is embedded. If you are targeting a renderer that ignores CSS - a rasterizer or an older icon pipeline - enable "Maximum compatibility for variable bindings" in the SVG export options, which writes a literal attribute alongside the variable reference.
The Classes section of the same panel is the other way to reach many shapes at once: write a rule, then use "Apply class to selection".
Step 7: Save and reuse the palette
Once the recolored SVG looks right, open the color picker's Palette tab: generate a harmony from your base color, lock the swatches you want to keep, and click "Save palette". Saved palettes live in your editor settings rather than in the document, so future documents can pick the same colors without retyping hex values. Clicking a saved swatch applies its literal value - it does not create a binding, which is what step 6 is for.