Adding SVGs to a BigCommerce Theme

in , June 24th, 2024

When pushing a BigCommerce theme, icons in the assets/icons directory no longer appear. However, when you inspect your theme, the icon is properly bundled and pushed to your theme. BigCommerce also doesn’t allow you to add SVG files to the Image Manager, so it appears that you are out of luck. However, this issue can be solved! To fix the issue, you can use the grunt CLI tool to properly bundle SVG images and use them within our custom themes.

Adding SVGs to a Theme: Step by step

To properly use SVGs within our theme, we need to ensure they are added to our projects and referenced within the API correctly. Here are the steps for properly uploading an SVG to a BigCommerce theme.

Step 1: Add the SVG to your theme’s assets/icons directory.

Step 2: Once the SVG is added to your icons directory, you will need to use grunt to add the image to the themes icon sheet. First, use NPM to install grunt if you don’t have it.

npm install -g grunt-cli
npm install

Step 3: Now that you have installed grunt, you can run it by running grunt in your terminal.

If you get an error, you can run grunt --force, which should fix the issue.

Step 4: Next, you need to add the SVG to a theme file. Below is an example. When referencing the file name, you need to prefix it with #icon- so the pattern will be as follows #icon-<FileNameHere>

<svg><use xlink:href="#icon-exampleFileName" /></svg>

Congrats! You have SVG icons in your BigCommerce themes!

Additional Notes About SVGs

Here are a couple more things to note about SVGs when you are working with them:

  • You can not reference an SVG via the CDN
  • You can not reference an SVG with the <img> tag

Author: Maxwell Sherwin

Got stuck on a step in this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!


Want to keep learning?

Our team of NetSuite professionals has written articles on a wide variety of NetSuite topics, from SuiteCommerce tips, to recommended NetSuite solutions, to available support services, and more! 

Your cart