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.
Last updated
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.
Last updated
The list of the Theme Icons you can view .
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:
This article provides instructions on integrating custom icons into the theme. There are a few steps required to manage this task in a store.
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.
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
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.
Collage of images ->
Featured product ->
Map ->
Media ->
Multicolumn ->
->
Product information ->
Upload your custom SVG into the optimizer and set the parameters provided below:
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 .
The following example demonstrates the custom SVG icon in the "" section: