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:

1. We’ll customize the style of the icons

2. We’ll add the stylesheet link to the code injection of your site

3. Using some CSS, we’ll customize the color and size of the icon

4. 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