Iconic Design: Integrate Google Material Symbols on Your Squarespace Website

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!

Nicole Macdonald

AUTHOR


Nicole Macdonald – January Made x Creative Process Collective

Hi there! I’m the founder and head architect behind Creative Process Collective, as well as owner and designer over at January Made Design.  You can guarantee I will greet you with an over the top smile and talk your ears off about all things creative, small business and probably pets (everyone loves pets). Serial over-sharer on social media, you’ll be able to find me most days sitting at my trestle table working away with a green tea and surrounded by too many house plants and most likely a cat stretched across my keyboard.

Website | Instagram | Facebook

https://www.januarymade.co.nz
Previous
Previous

January Made's Top 8 Interior Home Design Websites for Endless Inspiration

Next
Next

Why Your Creativity Matters, In The Most Meaningful Way