Skip to main content

SVG Icon

After Turning on Blocks from Grigora's Kit Dashboard.

We can use SVG Icon Block in Site Editor/Blog/Page from Toggle Block Inserter.

Insert SVG Icon from listed Blocks.

Once SVG Icon is inserted, select the SVG Icon.

After selecting SVG Icon , Go to block settings, in block settings we see bunch of settings and we'll be exploring them one by one.

Icon

To insert an icon, click "Select Icon" and select the desired icon.

After inserting icon the Size of icon can also be can using unit input. Value entered uses pixels as its unit.

Color of the icon can also be changed by turning on the toggle button. The color can be applied normally as well as on hover effect using Color Picker and Color Palette.

By clicking on change icon we change icon and to remove icon we have click on remove icon button

Layout

Padding can also be applied to the icon which can be mixed padding (applies on all sides) or individual padding (can be applied on individual sides) by clicking on unlink sides using unit input where the input value can be only numbers.

Margin can also be applied to the icon which can be mixed padding (applies on all sides) or individual padding (can be applied on individual sides) by clicking on unlink sides using unit input where the input value can be only numbers.