How do I make these "x" buttons white?

Store Design
, , , , , , , , , , , ,

Topic summary

A user seeks to change the color of “x” (close) buttons from black to white on their Shopify store using the Origin theme. The buttons appear in the search modal and header areas.

Solutions Provided:

Multiple community members offered CSS code snippets targeting different selectors:

  • Initial attempt targeted .search-modal__content svg.icon.icon-close and .header__icon svg.icon-close
  • When one button remained black, additional solutions targeted button.search-modal__close-button *
  • Final comprehensive solution targets both div.search-modal__content.search-modal__content-bottom > button > span > svg and span.svg-wrapper.header__icon-close > svg

Implementation Steps:

  1. Navigate to Shopify admin → Online Store → Themes → Edit Code
  2. Locate CSS file (base.css, theme.css, style.css, or main.css) or theme.liquid
  3. Add provided CSS code using color: white !important;
  4. Save changes

The most recent solution includes a screenshot showing successful white “x” buttons. The discussion appears resolved with working code provided.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
3

The “X” button to the right is still black.