How to Add SVG Icons to Squarespace

How to Add SVG Icons to Squarespace - In this video I show you how to add SVG icons to your website. SVG icons are far superior to image icons because they scale infinitely and therefore will look crisp on every display.
Related Resources:
💻 Free Squarespace CSS Beginners Course: schwartz-edmis...
📝 Free Squarespace Design Course: schwartz-edmis...
📚 Squarespace CSS Snippet Library: schwartz-edmis...
📷 Gear I use to Film My Videos:
Camera (Sony a6400): amzn.to/4gqFV1f
Lens (Sigma 16mm f/1.4): amzn.to/3MQlAF4
Cam Link (turns DSLR into Webcam): amzn.to/3B4afia
Microphone (Blue Yeti): amzn.to/4erxBfI
Main Light (Godox SL-60W): amzn.to/3B3udt8
Softbox (AMBITFUL 37”): amzn.to/3XsPAvE
Light Stand (EMART 9.2ft): amzn.to/3zdH2AO
Colored BG Light (IVISII G2): amzn.to/47xW4OA
Screen Recording (OBS): obsproject.com/
Help Support My Channel:
☕ Buy me a coffee: schwartz-edmis...
✉️ Hire me: schwartz-edmis...
WHO AM I?
If we haven’t yet before - Hey 👋 I’m Chris, a Squarespace web designer specializing in customizing sites with CSS. Through my videos here on this channel, my courses and plugins, I help Squarespace web designers all over the world create more customized layouts and bring their website vision to life.
PS: Some of the links in this description are affiliate links that I get a kickback from 😜
#css #squarespace #squarespacecss
Music: / justin-kolas

[@oriehi_raphael_paul]

Hi Chris, I'm grateful for this video but while I now understand how to put an icon on my website, I don't understand how to put the icon of a particular business on my website. For instance, how do I put the icon of Klaviyo on my website? Please help

[@Sheeporino]

Thanks man! I learned something new from this video!

[@SEWebDesign]

No problem! Great to hear!

[@shaunicrystallane6140]

I am tearing my hair out trying to figure out how to get rid of all that empty space in the codebox itself. You centred your icon in the space, but this doesn't work if you want to have an icon to the left of a text block. Am I being really dumb? I have been tweaking the viewbox and width/height values and it might as well be black magic at this point... my SVG is also ignoring my center align :')

[@felixglasenapp6192]

you are insanely good man

[@SEWebDesign]

Thank you Felix!

[@kondjanegongo796]

Thanks a million. I most deff will. I do have one question, how do you change the colour of the icon to a certain shade of red for example.

[@SEWebDesign]

Hi Kondja, I cover that in the video! You change the fill color

[@kondjanegongo796]

@@SEWebDesign Yeah but you typed in the colour name (example RED) lets say i want #304D73 as a colour, do i just add that in as is?

[@SEWebDesign]

@@kondjanegongo796 correct!

[@kondjanegongo796]

@@SEWebDesign Thanks.

[@DanielLeftwich]

Excellent video, thanks again Chris. Is it a hop, skip, and a jump to add an SVG pattern as a section background? Or perhaps a full bleed code block (in fluid Engine) is the way to go now 🤔

[@SEWebDesign]

I haven't added an SVG as a pattern to a background yet, so I am not sure the best way to go about it to be honest. Uploading the file to internal storage and then adding it a background image to the section via CSS seems like the best route just on instinct though.

[@DanielLeftwich]

@@SEWebDesign yup, me too. If I have any joy, happy to let you know - cheers!

[@jordanc2489]

Nice tutorial! Is there an easy way to remove the padding around the icons? Particularly the white space between the icon and the text underneath. Cheers!

[@SEWebDesign]

Since the icon is in a code block and the text is in a text block and all Squarespace blocks get 17px of padding, there will always be 34px of padding in between. So if you want to make them closer together, I would give the icon a negative bottom-margin

[@BirdzEyeViewAV]

VERY helpful! Thank you for your time and the great video!!!

[@SEWebDesign]

I'm so glad! No problem!

[@stephanyjones7469]

This is SO helpful, thank you for creating this! I have 1 question - When I enter that View Box code to change the size, the box surrounding my icon changes but the icon itself stays the same size. Anyway to fix that? Looking to make my icon a bit bigger. Thank you!!

[@hendrikwilhelmpsi]

Really added value! Thanks a lot my site looks so much nicer now! :)

[@ebonybullock1696]

I am in the 7.1 version and I cannot figure out how to format this in the same manner as you. If I choose the a section list template, I cannot add another block. If I do a blank section, I cannot get it to align correctly. Any ideas how to get this layout when the new version?

[@SEWebDesign]

I am using 7.1 in this tutorial. Each icon can be placed in its own code block in a blank section - just drag the code blocks next to each other

[@ebonybullock1696]

@@SEWebDesign Thank you!

[@ThePresentPerspective]

This was great! I’m glad that now I know about iconmonster. I hate having to add affiliate links. May I suggest the next video be “how to add/layer/position your graphics to your site” ? 🙈 I feel like there are so many different ways and so many different file types. Do I stick with svg? But what if I need my page to load faster and I have a lot of graphics to place around and layer? Do I create it as an image block? Or just upload it through CSS and position it through there? I’ve been searching for a while for a solid answer to this question and haven’t been able to find it. I don’t know how there isn’t a tutorial on it. You would be revolutionary if you were the first to post an answer ;)

[@SEWebDesign]

I would recommend always using svg icons over image icons. Svg icons are generally much smaller in file size than images. For example, the svg icon in this video was 775 bytes. So not even 1kb.

[@ThePresentPerspective]

@@SEWebDesign OK I had no idea! I suppose I just assumed they were larger size because they are so responsive and can do so much more. Once again, your channel is so amazing and I'm so grateful. A solid 50% of all that I've learned so far has been directly from you! Thank you!

[@SEWebDesign]

@@ThePresentPerspective that is awesome to hear! You are welcome!

[@buuraors]

how can I align that icon vertically?

[@SEWebDesign]

The height of the div container will be the height of the icon. So there shouldn't be extra vertical space for the logo to be centered in, since the height of the container div is determined by the height of the logo

[@buuraors]

@@SEWebDesign thank you !

[@MitchelJerome]

Could you put the re-center code in the comments I can’t make it work

[@SEWebDesign]

//svg code goes here

[@laurencalicutt5960]

What to do if the icon is not centering and the coding is correct? Could it be the type of template that I'm using for squarespace?

[@SEWebDesign]

I don't think the template would effect the centering. Perhaps it is the svg itself. You can also try giving the svg a style of display: block like so and adding that to your custom CSS window: .code-block svg { display:block; }

[@floatingonwater70]

sorry newbie here... where do you find the code to embed? i am able to donwload png and svg but do not have option, do i have to open in illustrator and copy the code from somewhere?

[@SEWebDesign]

You can open the icon in illustrator and do save as SVG and then copy the code. I'd look up "embed svg on website from illustrator"

[@floatingonwater70]

@@SEWebDesign Genial!!! So appreciate the sharing the knowledge to us web newbies. Be well..

[@PilateBeljour]

You just save my life. Thanks a lot.

[@SEWebDesign]

I'm glad it was helpful! No problem!!

[@jaymak1307]

Thanks very much for this video - I have been searching for days trying to find exactly this. I have two questions: 1. How would I change the colour to a very specific colour using a colour code? 2. I would love to know how to add a link to the .svg file so that it is clickable on the website - is that difficult to do?

[@SEWebDesign]

I cover changing the svg color in the video. All you would need to do is put in the valid hex code, rgb value, or color name. To make it a link, surround the svg tag in a link tag: (svg code goes here). You can Google creating links in html for more on that

[@SuperCd09]

Hi i replicated your steps but the SVG wont centre align. Dont know whats wrong

[@SEWebDesign]

You can hire me through my site to troubleshoot your CSS!

[@annaseragarcia4076]

This is so helpful thanks for providing this content! I'm currently using SVG's on a Squarespace site and am using them as larger images vs. just smaller icons. Unfortunately while they look great on desktop, they aren't scaling down to Mobile size which results in having my images cropped outside of the browser area. Is there a way to keep them contained and scaled appropriately according to browser size? Was looking for this information for ages, would love it if you could provide any suggestions. Thank you 🤗

[@SEWebDesign]

I recommend opening them in illustrator and then re-exporting them as svg's with "responsiveness" checked. That is all I can think of at the moment if the viewbox trick from the video doesn't work.

[@annaseragarcia4076]

@@SEWebDesign Yes, that seemed to work! Thank you so much for the swift response, greatly appreciate your videos :)

[@n.d.wilson2975]

It's probably best practice to assign a class (and even id) to the container div in use cases similar to the one you showcase in this video so that the styling can be modified easily in the Custom CSS window.

[@SEWebDesign]

Yes that is a great point especially if you will have lots of icons throughout your site!

[@ilze524]

Brilliant. This worked like a charm. Thank you :-)

[@SEWebDesign]

Great! You are welcome!

[@AmrAlchalati]

Thanks for the video. I'm having an issue, when I add the icon it looks right in the edit, but when I click done they stock on top of each other? I'm using the same scenario as you when it comes to text blocks and icons from icon monster... any idea?

[@AmrAlchalati]

Update, I found when I remove this line it removes the issue, did squarespace do some updates on how to use the code? I need the icons to be in the center :(

[@SEWebDesign]

@@AmrAlchalati you have to add a closing below. Any time you open a tag in html you have to close the tag.

[@AmrAlchalati]

@@SEWebDesign It worked and I can't thank you enough!!!!!!!!!!! For us average people we won't catch these basic stuff lol for it's a common sense. Thanks again! ❤️

[@SEWebDesign]

@@AmrAlchalati no problem!

[@charliebirch9335]

What if your svg is an original file vs an icon hosted on a stock site with an embed code?

[@SEWebDesign]

If you google svgOMG you can upload your file and then copy the svg code into the code block.

[@charliebirch9335]

@@SEWebDesign rocking resource thanks man.

[@SEWebDesign]

@@charliebirch9335 no problem!

[@moragcheshire]

Hey thanks heaps for the video. I put up my icons and it all looks great on editor view, however as soon as I save it, the icons stack ontop of each other on the left-hand side. I've put 4 code blocks side by side, the icon size is 120 and I got one from iconmonstr and the other 3 from Material Design Icons as SVG files following your direction. How can I get 4 icons sitting side by side across the page? Any help would be appreciated

[@SEWebDesign]

Make sure you have closed all open div tags. 4 code blocks will be next to each other until they stack on mobile. So if you are seeing them stack on desktop it must be an error in the code - usually not closing open divs

[@moragcheshire]

@@SEWebDesign I’ve checked all that, sadly it’s still not working. I was real pleased when I saw your video and worked it out. It looks great on a mobile but terrible on a desktop. I’m at a loss

[@moragcheshire]

@@SEWebDesign I got it! I hadn't closed one of the divs. Thank you so much!!!

[@SEWebDesign]

@@moragcheshire glad to hear it!

[@SenecaWan]

How do you add the icon to the nav bar?

[@SEWebDesign]

You can't add inline svgs to the nav bar, the only way to add an icon there would be to save it as a .png and add it to a link using an after pseudo element. Check out my multi row header tutorial, I use that technique in it

[@SenecaWan]

@@SEWebDesign thanks!

[@mmazz414]

Hey man, love this tutorial. Although, I'm a designer, and create my own icons. How the heck do I do this without the .svg code?

[@SEWebDesign]

You can save your icon designs as images and upload them to image blocks. But I prefer svgs when it comes to icons because of their crispness

[@karolinebrydebl9424]

Thank you for the great and easy to follow video, I really appreciate it! I have one question - I entered several svg codes in individual code blocks in squarespace (evenly scattered across the page in a grid form) and it looked fine when I edited and saved. But when I enter the page now, all the icons (svg) and all the text from further down the page is all cramped up very narrowly in the left side and all the way down. (so all the text boxes have also been affected and it looks as though there is something big and invisible on the rest of the page that "pushes" it all together in the left). Can it be something in the coding that causes this?

[@SEWebDesign]

Is there a text block or spacer block that is pushing the content over? If you have an error in one of the code blocks perhaps that could be the problem as well. If you would like to hire me to troubleshoot you can do so through my website!

[@labrini3572]

@@SEWebDesign Yeah having the same problem as well, nothing wrong in the code. Tried making the block larger size and made it worse!

[@TonyWebslinger]

Nice! Great info!

[@christopheprunier1851]

Thank you very much for these explanations, it works perfectly! Nevertheless, as a designer, I would have liked to be able to integrate my own icons (made under Illustrator in .svg) but I can't find how to do it :( I tried by making a link (instead of the one to Iconmonstr) to my .svg deposited on Google drive or Dropbox, but nothing works. Do you have a solution for me? Thanks again for sharing your knowledge this way!

[@SEWebDesign]

You can export svg's from illustrator and copy the embed code into the code block

[@christopheprunier1851]

@@SEWebDesign Thanks!

[@EmmaCOW93]

@@SEWebDesign Hi Chris, so if a designer sends me an SVG file and I'm adding it to the site, is there a way for me to grab the embed code for it?

[@SEWebDesign]

@@EmmaCOW93 yeah open it in illustrator and then follow the steps to get the embed code!

[@EmmaCOW93]

@@SEWebDesign Well dang. I don't have access to that :/ Thanks for your response!