Adding Icons from Google Fonts

At a glance

The community member is asking how to replace an existing icon with one from the fonts.google.com/icons site. Another community member provides a detailed response, explaining that the user can download the SVG icon, inspect the code in the browser's developer tools, and then replace the old icon's code with the new icon's code in the Webflow HTML embed. The community member who asked the original question expresses gratitude for the quick and helpful reply.

QQuinn Bell

Anyone know how to add an icon using from the fonts.google.com/icons site? I'm trying to replace the existing one with one from this site

2 comments

BBrandon Beaver

Hey 👋

If you download any SVG, including ones from Google Fonts/Material Symbols, you can open that SVG in your web browser, right-click and inspect it, and then in the dev tools pane, you can right-click the code snippet from the very top and "Edit as HTML".

Then, copy the code snippet—this code snippet is effectively the path that crafts the SVG.

Paste that into the HMTL embed in Webflow that holds the icon you want to replace. In other words, replace the old icon SVG code with the new icon's code.

Note, you may need to style the new code—for example, a lot of SVG code from Google's Material Icons and Material Symbols library will use pixel units for height and width, or they'll have a fixed hex code for color. You can update these right in the code embed in Webflow to style them how you'd like (e.g., replacing pixels with 100% for height or width, or specifying currentColor for icon color).

QQuinn Bell

Perfect! Thank you so much for the quick reply!

Add a reply

Community forum for knowledge and support

Adding Icons from Google Fonts