SVG Icons

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

Built-in theme SVG icons

The list of the Theme Icons you can view here.

Once you have decided on the icon you want to use in one or another section, copy the icon name by simply hitting 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. And here is what we have got:

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

Header:

• Menu icons

• Contacts

Template:

• Collage of images -> List item

• Featured product -> Icon with text

• Map -> Information line

• Media -> List item

• Multicolumn -> Column

• Ticker -> Content

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 into 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 following example demonstrates the custom SVG icon in the "Ticker" section:

---

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 using the field for icon selection. In the following example, the custom icon was applied to the Header using the "Menu icons" block:

Step 7

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