Free Web Design & SEO Crash Course!
Streamline your website to get more appointments booked, products sold, and grow your business!

By entering your email address you agree to receive emails from Svaren Web Studio. You can unsubscribe at any time.

How To Use SVG Icons In Squarespace

by Jeremiah Svaren | Last Updated: October 7, 2021

Looking to add some fancy SVG icons to your Squarespace website? We’ll cover every way that SVG’s can be used on your Squarespace site so that your website can stand out without sacrificing page speed!

An SVG File
An SVG File

Scalable Vector Graphics (SVG) files are amazing for tiny file sizes on your website, which will help speed up your page loading!

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 Squarespace, we need to upload them.

  1. Go into the block editor
  2. Click into any basic Text block
  3. Click on the Link button
  4. Click on the Gear button
  5. Then select “File”
  6. Finally “Upload File”
  7. Now select your SVG and “Upload”
  8. Click on the file you just uploaded so that you have a Check Mark to the left of the file name
  9. Click “Save”

Now you should have a link that looks something like this:

/s/svg-icon.svg

Highlight that link and copy it to your clipboard.
This link is how you will use the SVG throughout all of Squarespace.

Have You Outgrown Squarespace?
Graduate Squarespace Course

Ready to 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>
  1. In the block editor, add a “Code” block
  2. Now you’re going to use the little bit of code above
  3. Replace: [ /s/svg-icon.svg ] with your SVG file link that you copied initally
  4. Adjust the height to a number that looks how you want on desktop & mobile
  5. Replace: [ SVG file icon ] with text describing your icon
  6. Be sure to keep the qoutes as they are in the example code!

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!

Free Web Design & SEO Crash Course!
Get more customers, and grow your business!

By entering your email address you agree to receive emails from Svaren Web Studio. You can unsubscribe at any time.

Jeremiah Svaren wears just about all the hats at Svaren Web Studio. He started getting into web design and development back in 2013. First starting to learn on his own with books and tutorials, then in 2014 he attended The Tech Academy in Portland, Oregon. He learned all about software engineering and decided to start freelancing. Now when he isn't helping clients, he makes helpful content here and on his YouTube channel Svaren.