What Icon Set does Shopify Debut Theme use?

Shopify Expert
26 0 14

Does anyone know what Icon Set/Generator Shopfiy Debut uses? Where/How is it generating the path id?

I'm building a new store using the Debut theme. Only issue I am running into is that I need to add a few new icons. Instead of replacing all icons with a new pacakge like Themify or Font Awesome, I'd like to use the same icons Debut is using.

Thanks!

 

0 Likes
Shopify Partner
44 0 12

Hey, I was a developer on Debut so can point you in the right direction. We didn't use a package but rather designed a lot of the icons ourselves. They're SVG files that are included as snippets, and it's fairly straight forward for adding more.

  1. First, create your icon and save it as an SVG file. Illustrator or Sketch are great for this. You can also export icons from IcoMoon in SVG format.
  2. Open the SVG file in a code editor (you can do this step last in the Shopify code editor if you'd prefer) and add class="icon" to the SVG tag. Take a look at one of the icon snippets in Debut if you're unsure of how it should look.
    • This icon class makes it so the theme can overwrite the SVGs colors, along with some other basic formatting
  3. Change the file extension from .svg to .liquid and place it in your theme's snippet folder. I prefer to prefix the filename with icon- as well for organizational purposes.
  4. Use your new icon with {% include 'icon-cart' %}, where icon-cart is your filename

 

0 Likes
Shopify Expert
26 0 14

Thanks Carson. It would be very difficult to dupliate the exact style of the existing icons if I was hand creating all new ones. Is there any template that was used on the existing icons?

Sounds like it will be much more scalable to just switch to a icon library for me. 

I appreciate your response.

JR

0 Likes
Shopify Partner
44 0 12

No template, no. Creating them to look the same will be tough for sure, so your call if you want to do it manually or find a new set. If you choose to stick with the SVG route, the above steps will work for getting them in the theme. I'd still suggest Icomoon, export to SVG then follow those steps to convert them to snippets.

All tthe best

0 Likes
New Member
1 0 0

Where can I view the icons you have already made? Do you have, for example "shipping" and "customer service" style icons that I can use on the home page or other pages of my site? 

0 Likes
Highlighted
Shopify Partner
44 0 12

Edited my post, as I originally pointed to the Timber icon font set which is not relevant here.

You can see the current icons included in Debut here.

0 Likes
Shopify Expert
26 0 14

I ended up redoing all the icons so I can extend with new ones. Used the Themify icons.

In the Debut theme this is easy to do because each icon has an individual asset file. Just pick your icon set, install the CSS includes and update each icone asset file to match the new icon call.

JR

0 Likes
Tourist
34 0 1

how to add a cart drawer to the debut theme?

0 Likes