Add Metro or Flat Social Media Icons to Your Website

Would you like to create metro or flat social media follow icons in the official colors for your WordPress website or blog? Well, you can!

You can use the Simple Social Icons plugin by Natan Rice and StudioPress for this. While there are many plugins and icon sets to add social media follow icons, this one is easy to use on any website; it has fifteen different social media icons, and uses a font icon set so your icons always look crisp at any screen density. The options available in the plugin allow you to easily set colors, size, and border radius. So let’s get started.

Install the Simple Social Icons Plugin

From your WordPress Dashboard, click Plugins > Add new. Then search for Simple Social Icons. Click Install Now and then Activate.

Add the Widget to Your Website Sidebar

1. Now click on Appearance > Widgets.
2. Find the Simple Social Icons widget and drag it to your Sidebar widget Area.
3. The widget will open, so you can add your links. Go to all your social media sites and copy the urls from the top of the browser and paste into each URI field.
4. Then for the options at the top of the widget, choose the following:

• Icon Size – you can leave it at 36px, or for  small icons, try 24px, and for larger, try 48px.
• Icon Border Radius – try 8px for rounder corners on 36px icons or 10px on 48px icons; using 0 will give square corners and for circle icons, use a border radius of half the icon size.
• Leave the Icon Font Color and the Icon Font Hover Color at #ffffff (white).
• The Background Color (#999999 – medium gray) and  Background Hover Color (#666666 – darker gray) can be left at the defaults for now.

You can experiment with any of these settings.

Add New Icon Background Color Styles

Next you will need to add some CSS to change the colors. If you edit your own style.css, you can add the CSS below to the end of your file, but before any media query sections. You can also use a Custom CSS plugin.

To get the color hex codes for each icon, we can use the color chart from Simple Icons by Dan Leech, as featured on Smashing Magazine. In the comments, he tells how he created the color list.

You can then add the new background-color to each icon link. The !important is needed to make sure your colors, rather than the plugin colors, are used in your sidebar. Copy and paste this code into your style.css or your Custom CSS plugin.

/* Simple Social Icons
--------------------------------------------- */
.simple-social-icons .social-dribbble a {
	background-color: #ea4c89 !important;
}
.simple-social-icons .social-email a {
	background-color: #999999 !important; /* default */
}
.simple-social-icons .social-facebook a {
	background-color: #3b5998 !important;
}
.simple-social-icons .social-flickr a {
	background-color: #0063db !important;
}
.simple-social-icons .social-github a {
	background-color: #4183c4 !important;
}
/* Google Plus is no longer used */
.simple-social-icons .social-instagram a {
	background-color: #3f729b !important;
}
.simple-social-icons .social-linkedin a {
	background-color: #007fb1 !important;
}
.simple-social-icons .social-pinterest a {
	background-color: #cb2027 !important;
}
.simple-social-icons .social-rss a {
	background-color: #ff8300 !important;
}
.simple-social-icons .social-stumbleupon a {
	background-color: #eb4924 !important;
}
.simple-social-icons .social-tumblr a {
	background-color: #2c4762 !important;
}
.simple-social-icons .social-twitter a {
	background-color: #00aced !important;
}
.simple-social-icons .social-vimeo a {
	background-color: #44bbff !important;
}
.simple-social-icons .social-youtube a {
	background-color: #cd332d !important;
}

And that’s all there is to it!

More Examples of Flat Social Media Icons

This set of social media icons uses an Icon Size of 48px and an Icon Border Radius of 0px to make square icons.

This set of social media icons uses an Icon Size of 64px and an Icon Border Radius of 32px for large circles.

The set of social media icons below uses an Icon Size of 128px and an Icon Border Radius of 64px for huge circles.