Updated
May 29, 2024
Abode
Cove
Kintsugi
Learnable
Marigold
Opponent
Parable
Quantum
Retrograde
Nautilus
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.