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.
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
