Looking to add some fancy SVG icons to your
Scalable Vector Graphics (SVG) files are amazing for tiny file sizes on your website, which will help speed up your Squarespace site!
Here is an example of an SVG, which we could make 1,000px wide or 100px wide, and the quality and file size would be exactly the same!
Get your SVG files ready and let’s get into it!
Looking For Some SVG Icons?
We love using The Noun Project. We pay a small yearly fee so that we can use unlimited licenses for our clients without having to give attribution. But there are plenty of resources for free SVG files or you may already have some SVG files!
First, Upload Your SVG
In order to use SVG files within
- Go into the block editor
- Click into any basic Text block
- Click on the Link button
- Click on the Gear button
- Then select “File”
- Finally “Upload File”
- Now select your SVG and “Upload”
- Click on the file you just uploaded so that you have a Check Mark to the left of the file name
- Click “Save”
Now you should have a link that looks something like this:
Highlight that link and copy it to your clipboard.
This link is how you will use the SVG throughout all of
Take your website to the next level! Take the step today to move your website to a future proof platform that is built for speed & scale.
Embed Your SVG Into a Page
If you want to have an SVG icon within the content of your page, here are the simple steps to do just that!
<img src="/s/svg-icon.svg" height="100" alt="SVG file icon"></img>
- In the block editor, add a “Code” block
- Now you’re going to use the little bit of code above
- Replace: [ /s/svg-icon.svg ] with your SVG file link that you copied initially
- Adjust the height to a number that looks how you want on desktop & mobile
- Replace: [ SVG file icon ] with text describing your icon
- Be sure to keep the quotes as they are in the example code!
Looking for a visual guide? Here’s a video tutorial that we made a couple of years ago:
If you want to have your icon centered in the block, use this code snippet instead:
<div style="text-align:center;"> <img src="/s/svg-icon.svg" height="100" alt="SVG file icon"></img> </div>
Want the icon on the right side?
<div style="text-align:right;"> <img src="/s/svg-icon.svg" height="100" alt="SVG file icon"></img> </div>
Hopefully, that wasn’t too painful! Now you should have some crisp SVG icons to jazz up your web design!
Squarespace VS Square Online (VERY DIFFERENT SERVICES)
While they seem like they fit in the same box of website builders, Square Online and Squarespace are two VERY different E-Commerce platforms.
Squarespace VS WordPress: The Ultimate Showdown
Trying to decide between Squarespace and WordPress for your website? We'll go in-depth in this article with client examples so that you can decide once and for all the website platform to move forward with!
Speed Up Your Squarespace Site in 5 Easy Steps
In 5 easy steps, get your Squarespace site loading as fast as possible. While some of these steps require a little bit more time then others, anyone speed things up!
How To Setup Online Ordering With Square Online
Follow along with our free step-by-step video tutorial and start accepting orders online today!
How To Duplicate a Page on Squarespace
Quickly and easily duplicate pages and posts in Squarespace. Don't forget the small SEO details that are easy to miss when cloning a page.
Top 3 SEO Strategies
Everything you need to know about search engine optimization can be boiled down to these 3 strategies. Bonus 4th strategy is included!