Instructions

Grid System

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:
Section ↴
Container ↴
Grid ↴
Grid Item

Grid Item can be different widths.
‍

20%

25%

33%

50%

67%

80%

100%

Spacers System

Use this additional spaces if needed.
You can easily choose predefined space just input combo class that you need or create your own.

8px

12px

16px

20px

24px

32px

40px

48px

56px

64px

72px

80px

88px

96px

112px

128px

184px

SVG’s Code Icons

1. Embed Element

All icons in this template insert like SVG code via the "embed" element.

This is done so that you can easily control the color of the icon, and change it on hover

2. How it Works

You can easily copy & paste these icons and change it size via "Size" panel

Change color (In the Typography section)

Control color on Hover State

3. Anatomy of SVG Code

Size of the icon. Better to use in "%" and final size control via Webflow "Size" panel

This is a bounding box of icon.

Content of icon. How it will look like

If you want to control color via Webflow panel in the Typography section you should write in "fill" parameter property "currentColor"

4. Thats it

Hope these steps help you to use this technic to create or control your own icons.

And last but not least

SVG code you can grab almost in any graphic editor.

For example in Figma you can simple click on SVG icon right button of the mouse and find "copy as SVG" command.