How do I style the social media icons in the Squarespace footer?

Style Footer Social Icons — Squarespace CSS

Social icons in the Squarespace footer use SVG elements inside .sqs-svg-icon--social links. You can change their size, color, and add hover effects by targeting the SVG fill and the link wrapper.

Use the .sqs-use--icon or the SVG path for color changes. A hover scale effect and color change makes the icons feel interactive.

/* Social icon size */
#footer .sqs-svg-icon--social svg {
  width: 28px !important;
  height: 28px !important;
}

/* Social icon color */
#footer .sqs-svg-icon--social .sqs-use--icon {
  fill: #a0a0a0 !important;
}

/* Hover effect */
#footer .sqs-svg-icon--social:hover .sqs-use--icon {
  fill: #ffffff !important;
}

#footer .sqs-svg-icon--social {
  transition: transform 0.2s ease;
}

#footer .sqs-svg-icon--social:hover {
  transform: scale(1.15);
}

/* Spacing between icons */
#footer .sqs-svg-icon--list .sqs-svg-icon--wrapper {
  margin: 0 8px !important;
}

Design your footer social icons with our Footer Layout toolTry it free →