Horizon theme Icons + Text - Colour of Uploaded SVG

Store Design
1

I’d like to upload custom icons for the icons + text block, but the ones that are custom uploaded SVGs are not inheriting the theme’s colours like they should. Is this a Horizon/Dwell issue? I haven’t had luck generating any CSS that works.

site: https://bookishcat.co
p: 3N$7fyxV689k!

1 Like
2

It is doable you just need to target the svg and override the color that shopify adds from its color schemes. Here is an example

image
image1109×469 38.3 KB

3

@acosmos ,

This is expected behavior, not a Horizon/Dwell bug.

Why it’s happening

Uploaded SVG files do NOT inherit theme colors unless:

  • The SVG uses fill="currentColor" (or stroke="currentColor")
  • And does not have hard-coded fills like fill="#000" inside the SVG

Most uploaded SVGs come with fixed colors, so CSS can’t override them.

Built-in theme icons are:

  • Inline SVGs
  • Already set to currentColor
    So they automatically inherit text color.

Best options

Option 1 :

  • Edit the SVG file
  • Replace all fill / stroke values with currentColor
  • Re-upload

Option 2 (Theme edit):

  • Inline the SVG in Liquid instead of uploading it as a file

  • Then CSS color inheritance works

  • CSS alone cannot override hard-coded SVG fills

  • This is not specific to Horizon/Dwell

4

Thanks for your response. I feel like one of the main benefits of an SVG is to inherit colours, without having to redownload a new set of icons for each colour change. A bit disappointing that Shopify is not utilizing that in the uploaded SVG icons. I just ended up using PNG icons.