How to change the color of a specific icon with CSS?

Shopify Discussion

Topic summary

A Shopify store owner using the Shapes theme needs to change individual icon colors in an icon list block, rather than styling all icons uniformly.

Initial Problem:

  • Can successfully change all icons at once using .feature-icon-list or .theme-text CSS selectors
  • Unable to target individual icons despite trying various nth-child approaches
  • Wants to create a rainbow effect with different colors for each icon in the bottom homepage section

Solution Provided:
A community member provided working CSS code that:

  • Uses specific ID selectors combined with nth-child pseudo-classes
  • Targets individual icons within the icon row template
  • Example syntax: #icon-row-template--[template-id] > li:nth-child(1) > div > span > svg { color: red; }
  • Requires adding code to the theme’s CSS file (base.css, style.css, or theme.css)
  • May need !important flag if styles don’t apply initially

Resolution:
The solution successfully resolved the issue, with the original poster confirming it worked.

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

Hey there. Looking to change the color of individual icons in a row of 'em with CSS. Using the lovely Shapes theme (preview here). I can change all the icons with:

.feature-icon-list {
color: white;
}

OR

.text-scheme-text {
color: white;
}

OR

.theme-icon {
color: white;
}

But can’t figure out how to target individuals.

I’ve tried all of the nth-child options I can think of at various levels but I’m a CSS rookie. Help please!

Here’s the full code for that section:
1 Like
2

Hi @vicooo

It depends on the icons some icons cant be change. Do you mean like this? Which icons you like to target, ill see if i can change it. Thanks!

Made4uoRibe_0-1700172623828.png
Made4uoRibe_0-1700172623828.png445×140 35.1 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hey there; it’s the icons in the icon list block - which is all the way at the bottom of the homepage on the preview link in my original post. I’d like to be able to make 'em the rainbow of theme colors, instead of just a single color. This theme allows you to add custom CSS just for individual sections, so I could target just that one instance of the icon list block.

4

Do you mean this one.

Made4uoRibe_0-1700176328625.png
Made4uoRibe_0-1700176328625.png418×438 6.55 KB

If its rainbow color so it would be a lot of colors/codes :joy:

5

Nope this one:

Screenshot 2023-11-16 at 6.56.29 PM.png
Screenshot 2023-11-16 at 6.56.29 PM.png1644×796 16 KB

1 Like
6

You mean like this?

Made4uoRibe_0-1700215629512.png
Made4uoRibe_0-1700215629512.png736×336 16.8 KB

If it is check this code.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#icon-row-template--15779163734155__2c0e94c0-d22b-4966-95f3-82f1fff58385 > li:nth-child(1) > div > span > svg {
   color: red
}
#icon-row-template--15779163734155__2c0e94c0-d22b-4966-95f3-82f1fff58385 > li:nth-child(2) > div > span > svg {
    color: blue;
}
#icon-row-template--15779163734155__2c0e94c0-d22b-4966-95f3-82f1fff58385 > li:nth-child(3) > div > span > svg {
    color: yellow;
}
  • And Save.
  • If is not working just add !important.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
7

That did it, thanks!

1 Like