A user working with Shopify’s Dawn theme wants to add custom icons to the Collapsible Row blocks on product pages but cannot locate where the existing icons (check_mark, box, clipboard, etc.) are stored.
Key findings:
Icons are defined in snippets/icon-accordion.liquid file
Icon references must be added in two locations:
The icon-accordion.liquid snippet (SVG code)
The schema section of collapsible-content.liquid AND main-product.liquid (value/label pairs)
Locale files (locales/en.schema.json) also need updating to display icon names in the dropdown
Common issues encountered:
“Invalid JSON in ‘schema’ tag” errors when saving
Missing commas in the schema section
Adobe Illustrator exports SVG code in incorrect format
Solution:
Convert icons to PNG first, then use pngtosvg.com to generate proper SVG code format
Ensure commas are correctly placed between icon entries in schema
Add icon references to both schema sections (collapsible-content.liquid and main-product.liquid)
Update locale translation files with icon labels
Multiple users confirmed success after following these steps, with working examples available on referenced websites.
Summarized with AI on November 13.
AI used: claude-sonnet-4-5-20250929.
I am using the Dawn theme in one of my projects. In that theme, I have the ability to use Collapsible Row blocks on the product page. Each of those blocks allows me to select the related Icon. That pops up a list of icons such as check_mark, box, clipboard, bottle, etc. I want to add a couple more icons but am unable to find where these are store so that I can reference them correctly.
I found in main-product.liquid a section that calls out each of these options:
That file also had this under a checkbox type section. And I found similar in the collapsible-content.liquid file. However, I am not sure where those icons are located that it is referencing.
I did see some Icon liquid files in the Snippets area. But those icons don’t match the ones being referenced in the collapsible code.
Here’s an example image from the Dawn theme demo store for reference:
@ExpertRookie
That’s what I thought. I did find a bunch of icons files in the Snippets folder. However, these don’t match the ones that are available/listed for the collapsible row section. Here are the icon files in my Snippets folder:
@ExpertRookie
Thanks. I had just found that file as your reply was coming in.
I have added the icons to that file and am now trying to add the icons to the icon section in the collapsible-content.liquid file. All I did was add one more value-label section and ran into another issue. When saving, I am getting an error:
Unable to update the file
@ExpertRookie
Your second image, that is where I am working and ran into the error. I was able to add code to the section in collapsible-content.liquid:
That let me save the file correctly.
I found that needed to be added to two areas on the main-product.liquid file as well. That is where the JSON ‘schema’ error is occuring.
File 1: icon-accordian.liquid
Example of code for another icon:
{%- when 'washing' -%}
Following that example, I added the code that was was provided when making the icon in Adobe Illustrator:
```markup
{%- when 'hookless' -%}
That file saved okay.
File 2: collapsible-content.liquid
Example of icon content
```markup
{
"value": "washing",
"label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label"
}
Following that I added the following for the new icon
When attempting to save, I get the following error:
I checked the liquid template and there is nothing stating a maximum of 44. And I added some code that matched the item above. So I am pretty confused as to why the addition of one more icon code block is causing the error.
Edit:
I backed out of the website and went back in. I opened the collapsible-content.liquid file and for some strange reason, the value and label for item 45 is actually there, even considering the file wouldn’t save and threw up the error. Sounds great, let’s go add the icon on the product page.
And not there. I can still find the original icons, I just can’t find this one in the drop down list.
I have just been struggling with this myself, did you solve it?
I found I needed to add the name of the icon to the locales en.locales.schema.json file (2 times) for it to show up in the list of icons available if that helps?
Believe it or not, I just did this myself. The issue is illustrator does not give you the proper code for svgs. What you need to do is save the file as a PNG, and then go to the website http://www.pngtosvg.com.
That will then give you the code in the proper format. There’s something with illustrator not giving that proper format. It took me several days of researching to find that info. That’s why you keep getting that error.
Also, be sure that when you are referencing the SVG icon, make sure that you are entering it into the schema section as well at the bottom half of the file. You have to reference the icon in two locations. I did see that you have it in one, but you have to also reference it as well in the schema section. Reference ExpertRookie’s screenshot for the code, as the code is the same in both locations.
Hi, I managed to solve or complete what you were trying to achieve. You were just missing the commas in the schema. You were so so close. Anyway, I managed to do it. Took me about 1 hour to figure it out.
