Jump to content

Change color of social icon block?

Recommended Posts

  • Replies 13
  • Views 18.8k
  • Created
  • Last Reply

There are three color options for the social links block - Black, White or Standard. Standard will use the color associated with the service.

If you want to specify a custom color yourself, you'd need to use some custom CSS to do so. Adding this to the CSS Editor inside the Style Editor should do the trick:

.socialaccountlinks-block .social-account-list a { color: #777777 !important; }

Link to comment

@eanderson - Thanks for your reply. I should have been more clear in my original question.

I would like to change the color of the icons to a color other than black, white or the color associated with the service. I'd like to match the colors of I've chosen in the style editor for my site.


Link to comment
  • 9 months later...

@jnunez429 Are you using the Social Icon Block? (see http://help.squarespace.com/guides/using-the-social-links-block ) ... you can change colors within those settings.

If you're aware of that, please switch to "dark" color, and I'll inspect it again. THX

Also please clarify— you're wanting all icons to be the same color too? Or did you want to control individual icon's colors? THX

Link to comment

@jnunez429 Native is an older template and has it's own social icon built into the template (does not rely a 'Social Links Block' being added). You can adjust the color of these icons in the Style Editor. Just click on the icons or look for in the Footer section for the colors.


You should not need any custom CSS and be sure to remove any that you've added that did not work.

Link to comment


I am sure that I am using the social icon block, I switched it to the dark color like you said. I want all the icons to be the same color which is the lavender that I have in my header.


Hey, I am aware that the Native template as a social links block already added in the footer section but i wanted to put another set at the top my site. But using the social link block I can only use three colors. Which is why I tried using your code.

Link to comment
  • 1 year later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.