Create SVG Icons That Follow a Button’s Text Color

The left button changes its icon from teal to white when selected. The right button changes its text, but its icon stays black. Both use the same manually prepared SVG artwork; the difference is how the file is embedded.

Open the working two-button example and toggle each button. This guide shows how a generated mark becomes an interface asset that responds to CSS.

Start with an inspected SVG

The source is a fictional Fieldnote bookmark-and-compass mark from the SVG icon generator. The September 14 dashboard run used Classic, one SVG and transparency, with a displayed cost of two credits.

The original download uses literal RGB fills. It does not arrive with currentColor behavior. The manual variant adds that behavior and uses a mask to keep the compass visible as a transparent cutout.

This is a brand-mark example beside a label, not evidence that an unfamiliar compass is the best icon for every save action. For a standard interface action, compare a familiar library option in the Font Awesome comparison.

Understand the fill change

currentColor makes a fill use the element's computed color. MDN explains the relationship between SVG color and paint attributes. Setting color alone does not replace a literal fill already painted on a path.

For a simple one-shape icon, the key pattern is:

<button type="button" style="color: #0F766E">
  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
    <path fill="currentColor" d="M6 3h12v18l-6-4-6 4Z" />
  </svg>
  Save notebook
</button>

This small bookmark is manually coded. It is separate from the generated Fieldnote mark. The visible label names the action; the decorative icon is hidden from assistive technology to avoid repeating it.

Preserve multi-part artwork deliberately

Replacing every Fieldnote fill with the same color would hide the compass against the bookmark. The supplied manual version uses a mask with the bookmark area visible, the needle area transparent and its circular center visible again. The final foreground uses currentColor.

Read the complete SVG rather than copying only a path and losing its mask definition. If multiple inline copies share a page, give their mask IDs and references unique names. The working page uses a distinct inline mask ID.

Compare inline SVG with an image

Teal inline icon and black image icon beside their labels

In the default state, both buttons have teal text. The inline mark is teal; the external image renders black. Selecting the buttons changes their text to white on navy:

Selected buttons showing the inline icon becoming white while the image remains black

The inline SVG inherits the button's color because its elements belong to the page. The image is a separate document and does not inherit that surrounding CSS value. Use an appropriate explicit-color asset when embedding with img, or inline a reviewed SVG when it needs to follow the control's state.

Check the final control

The working buttons use visible labels, type="button" and aria-pressed for the toggle state. The mark is displayed in a 24-by-32-pixel box in this example. Check that actual placement rather than assuming every SVG belongs in a square.

Try Tab and Space as well as a pointer. Confirm that focus is visible and that the state changes without moving the surrounding layout. This demonstration does not save notebooks to an account.

For a smaller mark, compare the manual simplifications. For standalone brand placement, use the light and dark logo variants. Keep the generated source and the manually prepared interface file separately so future changes are clear.