Icons - SystemFlow

Use icons

Important! Make sure to have Custom Code (must be on every page) symbol on each page to display the icons. This symbol contains a necessary code to display Material Icons in Webflow and published pages.

Replacing the icon

Go to https://fonts.google.com/icons?selected=Material+Icons
Search for the icon you want to insert.
Select the icon and click on the copy icon under icon name in the right panel, for example 'account_circle'.
Select the 'Icon Small' symbol on the canvas.
Paste the icon name from clipboard in the Instance Overrides panel on the right.

Try it out

Select the icon below and change its name from star to face in the Instance Overrides panel on the right.

star

Customize

Changing the icon theme

Click on the icon: account_box
Rename Material Icons class to the name of desired theme: Material Icons Outlined , Material Icons Round , Material Icons Sharp

Changing the color of the icon

Simply apply the text color class to the icon. For example C T Error-60

Try it out

Select the icon below and add a class C T Error-60 to it.

star

Icon Components

Feature Icon / Light

star

Feature Icon / Dark

star

Icon Small

star