Add Google font icons to your Squarespace website

The search is over, here’s some amazing code that lets you use a Squarespace code block to integrate Google material symbols & icons into your site. Follow these easy steps:

rocket

---

rocket

Add to code injection

To use Google Material Symbols, you need to include their stylesheet in your site:

Go to Squarespace's Code Injection:

• Navigate to Settings > Advanced > Code Injection.

• Add the following <link> tag in the Header section:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

This loads the Material Symbols Outlined font. You can replace Outlined with Rounded, Sharp, or Filled if you prefer those styles.

rocket

---

rocket

Use a Code Block to Display Icons

Add this HTML code to your code block:

<div style="text-align: center; font-size: 3rem;">
  <span class="material-symbols-outlined">rocket</span>
</div>

Replace ‘rocket’ with the name of the Material Symbol you want.

• The list of Material Symbols is available in the Material Symbols Library.

rocket

---

rocket

Add CSS to customise the icon

You can style the icons with CSS for different sizes and colors. Add custom CSS in Design > Custom CSS, for example:

.material-symbols-outlined {
    font-size: 2.5rem; /* Adjust size */
    color: #74D8E4; /* Optional color */
}