Iconic Design: Integrate Google Material Symbols on Your Squarespace Website

In today's digital world, eye-catching visuals can make all the difference in keeping your website visitors engaged. Google Material Symbols are fantastic FREE vector icons that can add a touch of class to your Squarespace website, and we're here to show you just how to do it. No worries, it's a piece of cake - just a simple CSS snippet to get your site looking fantastic!

we hope you love!

favorite thumb_up addbookmark

---

Step 01. Grabbing Google Material Symbols

First things first, make sure you've got access to Google Material Symbols. Hop over to the Google Material Icons website (https://fonts.google.com/icons) and browse through their amazing collection.

---

Step 02. Choose which style you’d like to insert + grab code

This could be outlined, rounded or sharp.

Once you are happy with the style, click on an icon and grab the code which you’ll be inserting into your Code Injection

Log in to your Squarespace account and head to the website you want to spruce up:

1. Click on "Settings" in the main menu and then hit "Developer Tools"

2. From the options, pick "Code Injection."

3. In the "Header" section, drop in the CSS code (it will look something like this):

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

---

Step 03. Inserting Google Material Symbols into Your Website

Okay, now comes the fun part! To add an icon to your Squarespace website, we are going to utilise the ‘Strikethrough’ format on the site to add the icons instead. Note: If you use strikethrough on your site, you’ll need to find another, unused format instead (maybe monospace or Heading 4).

Time to Add Some CSS Magic:

1. Click on "Design" in the main menu and then hit "Custom CSS"

2. From the options, pick "Code Injection."

3. Then you want to add this code:

// Material Design Icons on strikethrough
span[style*="line-through"] {
  text-decoration: none !important;
  font-family: 'Material Symbols Outlined';
  font-weight: 200;
}

---

Step 04. Applying icons to your pages

So, once you've found the icons on the Google Material Symbol website that match your website's vibe, jot down their names. They will be really simple, but it’s important to get the grammatical part right (i.e. thumb_up will work, instead of thumb-up which won’t).

You can find the icon name by clicking on the icon and scrolling down the Info window to ‘Inserting the Icon’ on the Google Material Symbol website:

And then back on your Squarespace website, all you need to do is type the name, so let’s say:

chevron_right

and then, highlight it and add the strikethrough format, to get this:

chevron_right

Super cool right?!

---

You can now change the paragraph style too, to make your icons bigger or smaller, and format them as you would any text on your SS website. Change the colour, add a background, whatever you like!

And that's it! Adding Google Material Symbols to your Squarespace website is a breeze. These icons will jazz up your site and give it that extra oomph, delighting your visitors and enhancing their experience. So go ahead, mix and match, and have fun designing your perfect site.

Happy creating!

---

---

Share me on Pinterest!