Updated

May 29, 2024

Abode

Cove

Kintsugi

Learnable

Marigold

Opponent

Parable

Quantum

Retrograde

Custom Icons

Upload your own custom icons to visually emphasize the information within a list of items.

Upload your own custom icons to visually emphasize the information within a list of items.

Upload your own custom icons to visually emphasize the information within a list of items.

How it works

Installing your own icons can seem tricky, but I promise it can be done! To make things easier, just copy/paste existing icon code blocks and follow these instructions for replacing them with your own.

1. Download an SVG icon from somewhere like The Noun Project. It cannot be a PNG! Make sure it’s already in the correct color that you want to use (most on this template are white).

2. Right-click on the file and “Open With” > TextEdit.

3. Next, in Squarespace — while editing the page, double-click on the code block containing the current icon.

4. Copy + paste the new code you just viewed in TextEdit, replacing the highlighted code you see noted by the "<!—Replace This—>" indication.

5. It’ll probably be WAY too big at first, and that’s okay. To make them the right size, remove the "height="100px" and "width="100px" (or whatever size they are), and replace them with class="sm-icon"— this way, the sizing will be consistent across the site.

6. Now for the headlines. At the bottom of the code, you’ll see the H3 tag. Replace the copy that’s there with whatever you want next to or below the icon.

Installing your own icons can seem tricky, but I promise it can be done! To make things easier, just copy/paste existing icon code blocks and follow these instructions for replacing them with your own.

1. Download an SVG icon from somewhere like The Noun Project. It cannot be a PNG! Make sure it’s already in the correct color that you want to use (most on this template are white).

2. Right-click on the file and “Open With” > TextEdit.

3. Next, in Squarespace — while editing the page, double-click on the code block containing the current icon.

4. Copy + paste the new code you just viewed in TextEdit, replacing the highlighted code you see noted by the "<!—Replace This—>" indication.

5. It’ll probably be WAY too big at first, and that’s okay. To make them the right size, remove the "height="100px" and "width="100px" (or whatever size they are), and replace them with class="sm-icon"— this way, the sizing will be consistent across the site.

6. Now for the headlines. At the bottom of the code, you’ll see the H3 tag. Replace the copy that’s there with whatever you want next to or below the icon.

Installing your own icons can seem tricky, but I promise it can be done! To make things easier, just copy/paste existing icon code blocks and follow these instructions for replacing them with your own.

1. Download an SVG icon from somewhere like The Noun Project. It cannot be a PNG! Make sure it’s already in the correct color that you want to use (most on this template are white).

2. Right-click on the file and “Open With” > TextEdit.

3. Next, in Squarespace — while editing the page, double-click on the code block containing the current icon.

4. Copy + paste the new code you just viewed in TextEdit, replacing the highlighted code you see noted by the "<!—Replace This—>" indication.

5. It’ll probably be WAY too big at first, and that’s okay. To make them the right size, remove the "height="100px" and "width="100px" (or whatever size they are), and replace them with class="sm-icon"— this way, the sizing will be consistent across the site.

6. Now for the headlines. At the bottom of the code, you’ll see the H3 tag. Replace the copy that’s there with whatever you want next to or below the icon.

Still have a question?

Check out the FAQ page, or send a message via the Contact page.