Icons

 

Whenever you edit an icon and see a Code block appear, it's because the image has been installed as an SVG (Scalable Vector Graphic).

SVG images are razor sharp on higher resolution displays (i.e. retina).

Below: SVG

Below: PNG

Squarespace doesn't support (yet) installing SVG images via the standard image insert tools (Galleries or Inline Images) so we use the code block.

 
Within the Icon directory, you'll often see both SVG and PNG (PNG used for Gallery Navigation). Right click an SVG version and open with TextEdit or any favorite text editor and then copy the SVG code. You can include the the "<xml..." it won't break or hurt it – it's not needed.


Within the Icon directory, you'll often see both SVG and PNG (PNG used for Gallery Navigation).

Right click an SVG version and open with TextEdit or any favorite text editor and then copy the SVG code. You can include the the "<xml..." it won't break or hurt it – it's not needed.

 

Most SVG code elements are added between a "div" code snippet:
<div class="center">.....</div>
This is used to center the image/icon. If you're adding a new SVG, just add within div. If replacing an existing SVG, just past over the entire SVG between the the div opening and closing tags.

SVG Standard Sizing

200x200 art board / canvas with a little padding