Custom Simple CSS not showing :(

Site URL: https://harp-squid-dyer.squarespace.com/

Hi everyone,

I've just started creating my work/portfolio website and I wanted to add .svg icons instead of PNGs. When adding a PNG the icons were kinda blurry, so I added a markdown in the webpage linked to Custom CSS to display the SVGs uploaded to Files.

Thing is, these SVG icons only show when I'm on the Custom CSS editor. I know it's a common problem but none of the solutions I found seem to solve my problem. 

I thought maybe it's because I'm trying to add Custom CSS to the Home Page, but I tried the same method for other pages and it happens the same :(

I'm on Squarespace 7.1 and this is the code I'm having trouble with:

.design-icon {
   background-image: url("/s/Cupertino-_-Design.svg") ;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   height: 75px;
 }

.marketing-icon {
   background-image: url("/s/Cupertino-_-Marketing.svg") ;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   height: 75px;
 }

.branding-icon {
   background-image: url("/s/Cupertino-_-Branding.svg") ;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   height: 75px;
 }

.advising-icon {
   background-image: url("/s/Cupertino-_-Advising.svg") ;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   height: 75px;
 }

Hi.

You need to use FULL URL for iamge, eg: example.com/s/Cupertino-_-Marketing.svg

/s/ url in Custom CSS won't work in live mode.