How To Add Google Icons to Squarespace
This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes
Google recently released a big update to their icon database - Google Material Symbols is now available! You can use their open-source database to have HUNDREDS of free icons on your Squarespace site, and this tutorial will teach you how.
Here are the steps we are going to take:
We’ll customize the style of the icons
We’ll add the stylesheet link to the code injection of your site
Using some CSS, we’ll customize the color and size of the icon
We’ll place the icon on your site in a markdown block AND in a code block.
If you’re using a Squarespace business or commerce plan, you can follow this step by step. If you are using a personal subscription plan, you’ll need to add the whole thing in a code block on the specific page you want the icons on.
Here is the code from the tutorial that changes the font size and color:
font-size: 5rem!important;
color: blue!important
Here is a link to the new Google Material Symbols collection: https://fonts.google.com/icons