Squarespace 7.1 renders social icons in the header using the .header-actions-action--social wrapper. Each icon is an inline SVG that responds to the fill and color CSS properties.
Increase the icon size, adjust spacing, and add hover color transitions. The SVGs scale with font-size and inherit color from the parent, making them easy to restyle.
.header-actions-action--social .sqs-svg-icon--wrapper {
width: 32px;
height: 32px;
margin: 0 4px;
}
.header-actions-action--social .sqs-svg-icon--social {
fill: #333;
transition: fill 0.2s ease;
}
.header-actions-action--social .sqs-svg-icon--social:hover {
fill: #e74c3c;
}
.header-actions-action--social svg {
width: 18px;
height: 18px;
}Generate this with our Floating Social toolTry it free →
