Social Media Icon Styles

This is the code to change the color of each social media icon. You can view all of the icons in their original color as well as their hover states below.

Blog Lovin’

.simple-social-icons ul li.ssi-bloglovin a {
background-color:#24BEF2!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-bloglovin a:hover {
background-color:#0da6d9!important;
color:white!important;
border:0 black solid!important
}

Dribbble

.simple-social-icons ul li.ssi-dribbble a {
background-color:#ea4c89!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-dribbble a:hover {
background-color:#e73277!important;
color:white!important;
border:0 black solid!important
}

Email

.simple-social-icons ul li.ssi-email a {
background-color:#999999!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-email a:hover {
background-color:#808080!important;
color:white!important;
border:0 black solid!important
}

Facebook

.simple-social-icons ul li.ssi-facebook a {
background-color:#3b5998!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-facebook a:hover {
background-color:#324b81!important;
color:white!important;
border:0 black solid!important
}

Flickr

.simple-social-icons ul li.ssi-flickr a {
background-color:#ff0084!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-flickr a:hover {
background-color:#cc0069!important;
color:white!important;
border:0 black solid!important
}

Github

.simple-social-icons ul li.ssi-github a {
background-color:black!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-github a:hover {
background-color:#404040!important;
color:white!important;
border:0 black solid!important
}

Google Plus

.simple-social-icons ul li.ssi-gplus a {
background-color:#dd4b39!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-gplus a:hover {
background-color:#c43421!important;
color:white!important;
border:0 black solid!important
}

Instagram

.simple-social-icons ul li.ssi-instagram a {
background-color:#517fa4!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-instagram a:hover {
background-color:#436989!important;
color:white!important;
border:0 black solid!important
}

LinkedIn

.simple-social-icons ul li.ssi-linkedin a {
background-color:#007bb6!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-linkedin a:hover {
background-color:#006999!important;
color:white!important;
border:0 black solid!important
}

Pinterest

.simple-social-icons ul li.ssi-pinterest a {
background-color:#cb2027!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-pinterest a:hover {
background-color:#b01c21!important;
color:white!important;
border:0 black solid!important
}

RSS

.simple-social-icons ul li.ssi-rss a {
background-color:#ff6600!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-rss a:hover {
background-color:#cc5200!important;
color:white!important;
border:0 black solid!important
}

StumbleUpon

.simple-social-icons ul li.ssi-stumbleupon a {
background-color:#EB4823!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-stumbleupon a:hover {
background-color:#d23614!important;
color:white!important;
border:0 black solid!important
}

Tumblr

.simple-social-icons ul li.ssi-tumblr a {
background-color:#32506d!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-tumblr a:hover {
background-color:#284157!important;
color:white!important;
border:0 black solid!important
}

Twitter

.simple-social-icons ul li.ssi-twitter a {
background-color:#00aced!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-twitter a:hover {
background-color:#0096cc!important;
color:white!important;
border:0 black solid!important
}

Vimeo

.simple-social-icons ul li.ssi-vimeo a {
background-color:#aad450!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-vimeo a:hover {
background-color:#9ccd32!important;
color:white!important;
border:0 black solid!important
}

Youtube

.simple-social-icons ul li.ssi-youtube a {
background-color:#bb0000!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-youtube a:hover {
background-color:#990000!important;
color:white!important;
border:0 black solid!important
}