How to add new SVG icons to a Shopify product page?

Store Design
,

Topic summary

Adding SVG Icons to Shopify Product Pages

The discussion provides practical resources and methods for merchants unfamiliar with implementing SVG icons:

Key Resources Shared:

  • Free SVG editors: Method Draw (online), GIMP, SVG-Edit, Vectr
  • SVG optimization tool: SVGOMG (reduces file size for inline use)
  • Free icon libraries: Bootstrap Icons, Iconoir
  • CSS color filter generator: converts HEX colors to CSS filters for dynamic icon color changes

Implementation Methods:

  1. Via Theme Editor (no coding): Copy SVG code and insert directly through the theme editor. Steps are straightforward and documented in linked resources.

  2. Upload to Assets: Place SVG files in the assets folder and reference them in theme code.

  3. Easy Content Builder App: Free app allowing SVG icons to be added via text blocks to any product page section.

Important Note: SVG icons cannot be uploaded directly in the customize screen—they must be pasted into the HTML editor.

Participants confirm these methods work effectively, with one mentioning use of AI SVG generators for creating custom illustrations. The thread remains open for additional SVG best practices and resources.

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

I came across some questions about how to copy and add SVG icons to a Shopify product page. While this is simple for those familiar with Shopify, it is not the case for some new merchants.

Here are a few resources that can help you with using the SVG icons:

Free program to open and edit SVG files:

  • Free online editor: Method Draw
  • Or any free software you know (GIMP, SVG-Edit, Vectr, etc.)

Free tool to optimize SVG files:
https://jakearchibald.github.io/svgomg

This tool is handy when you add SVG inline to your page.
It helps you clean up the SVG and cuts the SVG file size - the smaller SVG file size, the better.

Free SVG icon libraries:

How to add an SVG icon to a Shopify product page:
You might find several ways to add your SVG icons to a Shopify page. An easy option is to use Easy Content Builder (a free app) to add Icons with text block to any section on your product page.

The steps are straightforward and all done via your theme editor without coding. Learn how to copy the SVG code and insert it to your product page here.

If you guys have other SVG resources or SVG best practices, please share them with me here.

PS. You might want to look at examples of the SVG icons on the Shopify product page: here, here, and here.

1 Like
2

You can add the SVG in two ways.

  1. You can upload svg icon in the assets folder and fetch it in the theme code.

  2. And another way is that you can just copy and paste the SVG icon into customize screen in the HTML editor.

please note, you can’t upload svg icon in customize screen.

let me know if you have any doubt.

3

Thanks! I’ve been tinkering with Shopify, and your suggestion is a game-changer. It makes the process a breeze.

4

@Cadrianne

Glad that you find the information in this thread helpful for your case.

Just want to share a new free tool - CSS color filter generator - that enables you to convert HEX color to CSS filter property in case you might need it.

With the generated CSS filter property, you can copy the code and paste it into the Custom CSS field (under the app section you want to change the icon’s color). This way, you can automatically update the SVG icon’s color within that section.

5

However, I also use ai svg generator to make illustrations. Kudos for sharing these resources and making Shopify a bit more SVG-friendly!