I need to add around 30+ SVG icons to my Shopify store theme. I don’t want to paste all the SVG code directly into my liquid files because it makes them really messy and hard to read.
Right now I’m using the include method like this:
{% include 'icon-name' %}
Then I create a file called icon-name.liquid in my snippets folder with the actual SVG markup inside it.
The issue is that putting all 30 icon files in the snippets directory makes it really cluttered. There are already other snippet files there and it’s getting confusing to find what I need.
Is there a way to make a subfolder inside snippets or create a new directory just for icons? Something like:
{% include 'icons/my-icon' %}
What’s the best practice for keeping SVG icons organized in Shopify themes? Are there any alternative approaches that work better?
SVG sprites work way better for large icon sets. I dump all my SVG icons into one sprite file in the assets folder instead of dealing with individual files. Just combine all your SVGs into one file with unique IDs, then grab specific icons with the <use> element. I made a simple liquid snippet that takes the icon name and spits out the right markup. This cuts down HTTP requests since everything loads in one go, and it keeps your snippets folder from getting cluttered. The sprite sits in assets where it should be with your other static stuff. Performance is solid because browsers cache the whole sprite - once it’s loaded, icons render instantly. Updates are easy too. Just rebuild the sprite when you add new icons instead of creating a bunch of snippet files.
Just make one master SVG snippet with all your icons and use liquid case statements. Something like {% case icon %}{% when 'home' %}[svg code]{% endcase %}. Way cleaner than having 30 files cluttering your snippets folder, and you don’t need any fancy automation. I’ve got 40+ icons working perfectly this way.
Had this exact problem managing icons across multiple Shopify stores. 30+ icons scattered in the snippets folder gets messy real quick.
Don’t cram everything into snippets - there’s a better way. Build an automated system that handles SVG management outside Shopify’s file structure limits.
I set up a workflow that watches my local icons folder. Add or update an SVG? It automatically processes the file, optimizes it, and pushes it to my theme. Plus it generates one clean liquid snippet that works like a centralized icon library.
Instead of 30 separate files, you get one smart snippet that takes an icon name. Like {% include 'icon-system' with 'arrow-left' %}. The automation does everything behind the scenes.
This fixed my organization nightmare and made icon updates super fast. No more hunting through cluttered folders or copying SVG code around manually.
Best part? Setting up this workflow takes maybe 30 minutes and works perfectly with Shopify’s API for theme updates.
Check out Latenode for building this - it connects your local file system with Shopify’s admin API seamlessly: https://latenode.com
Shopify doesn’t support subfolders in the snippets directory, so {% include 'icons/my-icon' %} won’t work. For organization, I suggest using a naming convention that starts with ‘icon-’ followed by a descriptor (e.g., ‘icon-arrow’, ‘icon-home’). This approach will group your icons alphabetically, making them easier to locate.
Alternatively, you could create a single icons.liquid snippet containing all your SVGs. You can then reference specific icons using {% include 'icons' with 'arrow-right' %}, utilizing conditionals within the snippet to render the desired SVG. This method helps maintain a clearer snippets directory, but keep in mind that it results in a more extensive single file if you have many icons.
Try a hybrid approach with liquid variables - way better for organization. Make one main snippet called svg-icons.liquid that uses parameters. Skip multiple files or massive case statements and just define your SVGs as liquid variables at the top, then output based on what gets passed in. Just do {% assign home_icon = '<svg>...</svg>' %} for each icon, then use simple conditionals to output the right variable. Call it with {% include 'svg-icons', icon: 'home' %}. Everything stays in one file without the performance hit from loading unused SVG code like sprites do. I’ve used this on several client stores and it hits the sweet spot between organization and maintainability. The file stays readable since each icon’s clearly defined as its own variable, and you don’t deal with complex external build processes.