Icons

This system uses Material Design's icon font. You can access all icons available in the Material Design library without the need to upload SVGs into your assets panel.

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

  1. Go to https://fonts.google.com/icons?selected=Material+Icons
  2. Search for the icon you want to insert.
  3. Select the icon and click on the copy icon under icon name in the right panel, for example 'account_circle'.
  4. Select the 'Icon Small' symbol on the canvas.
  5. 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

  1. Click on the icon: account_box
  2. 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
fiber_smart_record
Feature Icon / Dark
star
Icon Small
star
arrow_upward