Skip to content
Use custom icons
The theme includes 60+ icons available through the Icon block. If you need an icon that is not part of the default set, you have two options: add a custom icon via code, or use the Image block to display any image as an icon.
Option 1: Add a custom icon via code
Prepare your SVG file
- Obtain or create the icon you want to add in SVG format.
- Optimize the SVG to remove unnecessary attributes and reduce file size. SVGOMG is a free tool you can use for this.
Upload the SVG file
- Open your Shopify admin and navigate to Content > Files.
- Upload your
.svgfile. - Once uploaded, copy the file URL provided by Shopify.
Edit theme code
- Open the theme editor and navigate to Actions > Edit code.
- Locate the
theme__icons.liquidsnippet inside the Snippets folder. - Find the
{% case icon %}block and add a new entry for your icon. Replacemy-custom-iconwith the name you want to use and update thesrcwith the file URL copied in the previous step. - Save the file. Your custom icon will now be available for selection in the Icon block picker.
Option 2: Use the Image block (no code required)
If you only need to display a single custom icon without modifying theme code, the Image block is a simpler alternative.
- Add an Image block to any section in the theme editor.
- Use the image picker to upload your icon file (
.png,.svg,.webp, etc.). - Adjust the Width setting to control the display size of the icon.
Refer to the Image block documentation for a full list of available settings including spacing, color scheme, alignment, and border options.