Streaming live at 10am (PST)

SOLVED: Colorable SVG icons from a collection

Maybe someone’s already posted this but I spent a couple of hours trying to get colorable icons out of a collection list and I didn’t find anything, so I thought I’d post the solution I landed on in case it helps anyone else out.

There’s an existing technique to color SVG icons already:

  • Upload a SVG icon
  • View and copy the source code of that icon
  • Add a code block to your page
  • Paste the icon code in
  • Replace the hex color code with ‘CurrentColor’

That works great for non-dynamic pages but I have a client with services, sub-services, and tactics; 3-level deep offerings that are all organized into database collections. The design calls for each sub-service and related tactics to be color-coded so I needed a way to assign icons to both things, sub-services and tactics, and have those icons show up in the right color.

The easy way is to just upload icons in the right color but that’s not very future proof. What if they want to change the color (also defined in the collection)? What if they want to change or swap icons around?

I tried editing my icons and changing the hex code to ‘CurrentColor’ before uploading. That doesn’t work because you’re still referencing the uploaded icon via an image tag. An image is a resource external to the page that the page fetches and renders. It doesn’t inherit CSS from the page itself. For this to work, the SVG code has to be embedded.

I tried pasting the SVG code into a text block, but it encoded the string so I just ended up seeing the code rendered to the page instead of the icon.

I looked around to see if anyone else had solved this and couldn’t find anything.

Then I remembered, hey, Webflow lets you use code blocks in Rich Text Elements now and those very specifically are not encoded. They’re raw code. So I added a rich text element to my collections and in the rich text element I added a code block and in the code block I pasted in my SVG code (with ‘CurrentColor’). On the collection page I dropped that rich text element into my icon container and voila! I have an icon that inherits the current color of the section it’s in, the icon can be changed at the client’s whim, the color can be changed at the client’s whim, and it can have hover or other actions modify the color.

For those skimming past the whole long story:

  • Add a rich text element to your collection
  • Add a code block to the rich text element
  • Paste your SVG code into the code block
  • Make sure the hex color code is changed to ‘CurrentColor’ (no # sign)
  • The rich text element will render the icon to the page and the icon will inherit the text color of the section it’s in and you can modify/change that to your hearts delight

UPDATE

The proof of concept worked but when I went to do a whole set of icons in a collection, every collection item shows whatever the first icon in the collection is. This is a weird Webflow bug. There’s different rich text content in each collection item so this just shouldn’t be happening.

Added the bug tag to this post.

1 Like

Thanks for sharing this. I often use the approach of a RTF as code block container since it does not get encoded when output to the page. Works great for this type of scenario but not as a value inserted into the page code areas (nogo).

That makes sense. Webflow puts a wrapper around the RTFs. Might be possible to strip that out with JS but I haven’t had a need to attempt something like that (yet).