SVG Icons

Use pre-designed SVG icons to display responsive images for all screen sizes in various parts of your store, such as the Header or dynamic theme sections.

Built-in theme SVG icons

View the list of Theme SVG icons here.

Once you have decided on the icon you want to use in a section, copy the icon name by simply clicking the image.

To confirm that the icon has been copied, you may notice the "Copied" text next to the icon's name.

You can now paste the icon name into the corresponding field of a section or block you are customizing. In our example, we use the "Multicolumn" section with the "Column" block to set up settings.

Available theme sections and blocks where SVG icons can be used:

Header:

• Icon menu -> Menu item

• Header -> Contact -> Contact line

Template:

• "Header" block: Icon, Icon with text, and Content group

• Multicolumn -> Column

• Scrolling text -> Scrolling item

Product page:

• Product information -> Icon with text

---

Integrate custom SVG icons into the theme

This article provides instructions on integrating custom icons into the theme. There are a few steps required to manage this task in a store.

The New Approach

The following configurations are available for theme versions starting from v3.0.0.

Step 1

Note! Applying these customizations requires design skills and abilities. You can create an icon using various methods. Operating the optimizer is just one example of the many available options.

Upload your custom SVG to the optimizer https://svgomg.net/ and set the parameters provided below:

• Turn off the "Remove view Box" option.

• Turn on the "Prefer view Box to width/height" option.

• Turn on the "Remove style elements" option.

Step 2

Set the icon color to adjust dynamically based on the applied color settings. This approach lets the theme's CSS control the icon's color seamlessly:

• Search for lines stroke or fill and add a value other than none.

• Set the value of currentColor for its fill or stroke properties.

Step 3

Copy and paste the icon code into the "Icon SVG" fields in the corresponding sections or blocks of the Theme Editor. This functionality is available in the following sections and blocks listed above.

---

The Old Approach (v2.1.0 and lower)

Follow the steps outlined below to add custom SVG icons to theme versions up to 2.1.0.

Step 1

Remove icon styles:

Step 2

Add the class icon.

Step 3

Change the icon color:

• find all fill:

• Replace the value with the fill="currentColor" (there may be multiple instances):

Step 4

Replace icon width and height sizes with coordinates:

• Remove the following dimensions:

• Then, add dimensions using the provided template viewBox="0 0 WIDTH HEIGHT", ensuring you use the original width and height that were removed.

Step 5

Implement the custom icon into the theme:

• To edit the theme code, go to your Shopify admin and press the three dots [...] button next to the theme name. Then, select the "Edit code" item.

• Select the snippets/ folder and add a new file named icon-theme-CUSTOM_NAME.liquid.

• Copy and paste the HTML code of the custom icon into the added file.

Step 6

In the admin, enter CUSTOM_NAME in the icon selection field.

Step 7

Repeat the same steps to add more custom icons to the theme.