How can I add a custom icon to the Text columns with icons section?
Although the section "Text column with icons" provides 18 pre-set icons, there may be instances when you need personalized icons that match your business requirements. Even though the section does not include an upload icon feature, you can incorporate your icons by customizing the theme code.
Method 1:
One way to customize the icons on your website is by replacing the icons and links in the theme file with your own custom ones. The idea is to include your asset and content in the same location by hardcoding it.
Steps:
If you go to Online Store > Themes Edit code > Sections > text-with-icons.liquid file, you can find the code section that handles the different icons.
This could all be replaced by your custom icon + content, essentially removing the 'default' from appearing on the page and using the same location for your own. Here's an example:
Method 2:
Another method would be to replace the existing SVG file path of the icons you don't intend to use with your own custom icon. Each icon uses an SVG file path that you can replace. This way, any time you select, 'bills' as the icon (for example), your custom icon will appear.
If you need to convert your SVG file to an SVG HTML path, there are some free SVG HTML path tools you can find and use online.