/// Changing the Color of Social Media Icons in SquareSpace

So you’ve created your brand-spankin’ new SquareSpace website and styled it perfectly to match your brand with font pairings, gorgeous colors and a lovely layout. BUT, you can’t get those pesky social media icons to match your pretty palette. Don’t worry! I’ve gotcher back.



There’s a tiny string of code that you can use to change the SquareSpace social media icons from black and blah to any color you want! Follow the steps below on your own site and voila, styled social icons!

Here are the deets:

  1. In the backend of your SquareSpace site, navigate to DESIGN.
  2. Click on CUSTOM CSS.
  3. Paste in this bit of code:
    1. .sqs-use--icon {
          fill: #F65959 !important;
      .sqs-svg-icon--wrapper:hover {
        .sqs-use--icon {
          fill: #444 !important;
  4. The red HEX color is what you’ll need to change to match your own color palette. If your not sure what HEX your color is, check out this handy converter.
  5. That’s it! You’re set.

Don’t you feel like a SquareSpace genius?!


Note: This set of code works for the “Regular” style of icons. 

  • http://www.trekandstray.com/ Ashley Armstrong

    This is SUPER helpful! Thanks!

    • http://junemango.com/ June Mango Design Boutique

      I’m glad you liked it! And let me know if there’s anything else similar you’d like to see on the blog. Happy to post more SquareSpace hacks. :)

  • http://www.designerisms.net/ Stacey Burr

    Amazingly helpful, thank-you!!

    • http://junemango.com/ June Mango Design Boutique

      You’re so welcome!!

  • Kal

    Thank you so much for sharing this! I spent way too much time looking for this and trying code snippets!

    • http://junemango.com/ June Mango Design Boutique

      I’m glad you found it here! Let me know if you need any other SS code – I’d be happy to help.