All themes - General - Add custom icons to sections and blocks

This article is for merchants who wish to incorporate custom icons into different sections and blocks of their store. While our themes offer a wide selection of pre-crafted icons, this feature empowers merchants with the ability to add their own personalized icons.

The icons included in the Safe As Milk themes are from Streamline's 'Light' collection.

The method for adding icons is essentially the same for all sections and blocks.

Information: Please note that although this feature has been fully tested we are unable to test every icon and illustration in every situation. If the icon fails to render as expected you may need to fall back to the pre-crafted icons included with the theme.

Add SVG code from a third party icon library

We recommend using Streamline for icons but there are many companies offering icons in SVG format.

Steps:

  1. Head to Streamline (or similar) and source an icon you wish to display on your store
  2. Look for the SVG code tab/option (see screenshot above)
  3. Copy the SVG code to your clipboard - or paste it somewhere to be used later
  4. Head to the themes area of your Shopify admin
  5. Click the 'Customize' button. This will take you to the theme editor.
  6. Once the editor is open navigate to the 'Multicolumns with icons' section (or any block or section with this custom icon feature)
  7. Click into the 'Column' block and look for the 'SVG icon code' field
  8. Paste your custom SVG icon code
  9. Save your theme
  10. Check everything is working as expected

Please note that when using custom icons, the predefined colors within the icons themselves will override any 'Icon color' setting in the section or block.

Add SVG code from an existing icon you already own

Steps:

  1. Source the icon you wish to work with - it must be in SVG format.
  2. Open the icon in a basic text programme like TextEdit (Mac) or Notepad (PC). Alternatively you can use a tool such as SVGO to open the SVG file and then copy the code as text.
  3. Copy the SVG code to your clipboard - or paste it somewhere to be used later.
  4. Head to the themes area of your Shopify admin.
  5. Click the 'Customize' button. This will take you to the theme editor.
  6. Once the editor is open navigate to the 'Multicolumns with icons' section (or any block or section with this icon feature).
  7. Click into the 'Column' block and look for the 'SVG icon code' field.
  8. Paste the SVG icon code.
  9. Save your theme.
  10. Check everything is working as expected.

Warning: You can also use this method to add complex images, such as SVG illustrations from services like Streamline. However if the image is complex, you can sometimes hit a file size restriction of 256kb in the Shopify theme editor and trigger a warning. One workaround is to use a service such as SVGO to reduce the file size before pasting the code into your theme.

Still need help? Contact Us Contact Us