Use this Grid for creating new layouts. You can combine this percentages with each other for creating uniq layouts.
Almost all layouts have one HTML structure:
Grid Item can be different widths.
Parent div block with class "Grid"
Children blocks with class "Grid Item". Each of this classes has predefine combo classes with percentage: 20, 25, 33, 50, 67, 80 and 100.
Main principle of this Grid is wrapping Grid Item to next line when it fills 100%. So, you can have in one line different combo layouts like: 50:50, 25:25:25:25, 33:33:33 etc.
For mobile breakpoints, you could add a specific combo class to Grid Item for 100% width. For example, You have a 33% "Grid Item" and for the Tablet view, you want to show this element in 100%. You could add combo class "Tablet 100" to do this.
If you struggling with combo classes you can read more about it.
Use this additional spaces if needed.
You can easily choose predefined space just input combo class that you need or create your own.
This is done so that you can easily control the color of the icon, and change it on hover
Hope these steps help you to use this technic to create or control your own icons.
SVG code you can grab almost in any graphic editor.
Feel like changing something in the template? All of our templates where built using Webflow without writing code. That means you can customize them in every way to suit your brand. Learn more about how to customize Webflow sites at Help Center