Theme editor section and block icons

I am building a custom theme with custom sections and blocks. When I name a section or block certain things (like “Row”, “Button”, or “Text” for example) Shopify chooses an appropriate icon to display when in the Theme editor sidebar. I know it’s not possible to use custom icons for this but it would be extremely helpful if I were to have a glossary or some documentation explaining what icon will be chosen when certain names are used. Does anyone have any info on this.

Also, Shopify Team - I have a feature request. Please add an option in the section and/or block schema allowing us to either provide a Polaris icon name or inline SVG code. This would allow us to choose an icon instead of relying on the file name which is very restrictive.

2 Likes

Hi Jeff,

Our logic for selecting the icon in the sidebar isn’t documented anywhere at the moment but we will make sure this gets documented in the near future.

Also, we appreciate the feedback on letting devs select and provide their own icons. I’ll log this and pass it along to the team for consideration.

2 Likes

Hi @MartinM-Shopify,

I just wanted to check if this documentation is available yet? It would be very handy to have the list of available icons!

Thanks,
Iain

Hi @MartinM-Shopify

What is the logic behind this? is it based on the section name or the available section settings?

From what I’ve been able to deduce through trial and error is the icon is based on specific words uses in the file name within the theme. So, for example, I have a theme block in my theme called “Layout” but to get it to show an icon that makes sense, I have to name the liquid file something with the word column in it to get it to show an icon that remotely makes sense. Other words I know it looks for are Product, Collection, Image (or images), Video. What would be amazing would be if we could specify what that icon was but if Shopify doesn’t allow for this, if they could at least publish that list of preferred words so developers could tailor their themes to use some of these.

1 Like