Want over 100+ free icons for your Squarespace site? How about icons that you can easily change the size and color of too? Then this is the tutorial for you! 🥳

You can use Google's Material icons in Squarespace for free in just a few simple steps!

Follow along with this tutorial to learn how to link your site to their database of free icons, and how to install them and style them with custom code.

Check out all the icons available here: https://fonts.google.com/icons

Here are the steps:

First, install the following code in your page header
(Settings > Advanced > Code Injection)

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"      rel="stylesheet">

After that you have three options to use these icons by name on your site; add a code block, assign it to an h4, or assign it to an h5 and use a markdown block to reference the icon.

Using custom CSS you can change the size, color, and any other text property you want!

To use an icon in a code block, place the name of the icon inside the class like this example for the check_circle:

<span class="material-icons">
check_circle
</span>

You can assign the icon font family to a specific text type; this example can be used for an H5. Make sure you assign the font family to Material Icons, and adjust the other properties and values in bold below, adding anything else you want to see!

h5 {font-family: Material Icons; font-size: 3rem; color: teal}