4 Sets of Free Social Media Icons – Free Downloads

February 13, 2017 Leave a comment

Front End Design CSS Free Downloads icons social media icons

Here are a variety of different packages of free social media icons in the form of CSS sprites. They are complete with free downloadable files and CSS and HTML examples. There are 4 sets.

If you like these, you may also like these New Wood Social Media Icons.

Slanted Social Media Icons – Twitter, Google Plus, Facebook, 48px

Here is a CSS Sprite that includes 3 free social media icons on slanted 3D tiles: Twitter, Google Plus, and Facebook. The social icons are each 48px by 48px square.

Download the package to get the sprite .png image, the required .css file, and a sample HTML for the icons.

This is the CSS:
```
.social_icons_48_twitter,
.social_icons_48_google_plus,
.social_icons_48_facebook {
  background: url(sprite_48.png) no-repeat;
  display:inline-block;
  width: 48px;
  height: 48px;
}

.social_icons_48_google_plus {
	background-position: -104px 0;
}

.social_icons_48_facebook {
	background-position: -50px 0;
}
```
If you place the sprite image (sprite_48.png) in a different directory than the CSS, then you’ll have to edit line 4, above, to add the path to the sprite image. For example, you may have to change sprite_48.png to ../images/sprite_48.png.

The following is the HTML to display the icons. Line 1 will show the Twitter icon. Line 2 will show the Google Plus icon, and line 3 will show the Facebook icon. You will have to replace the # in the URLs so that it links to your own social media profiles.
```
<a  class="social_icons_48_twitter" href="https://twitter.com/#"></a>
<a  class="social_icons_48_google_plus" href="https://plus.google.com/#"></a>
<a  class="social_icons_48_facebook" href="https://facebook.com/#"></a>
```
Tiny 18px Free Social Media Icons – Twitter, Google Plus, Facebook

Here is a free CSS Sprite that includes 3 free social media icons: Twitter white bird on blue background, Google Plus, and Facebook button. The icons are each 18px by 18px square.

Download the package to get the sprite .png image, the required .css file, and a sample HTML for the icons.

This is the CSS:
```
.social_icons_18_twitter,
.social_icons_18_google_plus,
.social_icons_18_facebook {
  background: url(sprites.png) no-repeat;
  display:inline-block;
  width: 18px;
  height: 18px;
  margin:10px 4px;
}

.social_icons_18_google_plus {
  background-position: -19px 0;
}

.social_icons_18_facebook {
	background-position: -38px 0;
}
```
If you place the sprite image (sprites.png) in a different directory than the CSS, then you’ll have to edit line 4, above, to add the path to the sprite image. For example, you may have to change sprites.png to ../images/sprites.png.

The following is the HTML to display the icons. Line 1 will show the Twitter icon. Line 2 will show the Google Plus icon, and line 3 will show the Facebook icon. You will have to replace the # in the URLs so that it links to your own social media profiles.
```
<a  class="social_icons_18_twitter" href="https://twitter.com/#"></a>
<a  class="social_icons_18_google_plus" href="https://plus.google.com/#"></a>
<a  class="social_icons_18_facebook" href="https://facebook.com/#"></a>
    
```
64px Wood Social Media Icons: Twitter, Google Plus, Facebook, YouTube

Here are 4 wood social buttons in the form of CSS sprites. These free social media icons include a wooden Twitter icon, a wooden Google Plus icon, a wooden YouTube icon, and a wooden Facebook icon. They are size 64px by 64px. They are sort of glossy, dark wood.

You can either download the package to get the sprite .png image, the required .css file, and a sample HTML for the icons, or you can follow the three steps below.

Here are steps on how to implement these wooden social media sprites icons on your own website:

Step 1 – Download the Sprites Image

This image contains 4 Social CSS sprites, size 64px: Facebook icon, Google Plus icon, Twitter icon, and YouTube icon. Save the following image to your own computer. Right-click it to save:

Step 2 – Copy the CSS

This is the CSS that goes with the sprites above. Paste this into your CSS, and make sure to edit the path to the image on line 5, if needed, depending on where you place sprite image. For example, you may have to change sprites_64.png to ../images/sprites_64.png.
```
.social_icons_wood_twitter,
.social_icons_wood_google_plus,
.social_icons_wood_facebook,
.social_icons_wood_youtube {
  background: url(sprites_64.png) no-repeat;
  display:inline-block;
  width: 64px;
  height: 64px;
  margin:10px 4px;
}

.social_icons_wood_google_plus {
  background-position: 0 -74px;
}

.social_icons_wood_twitter {
  background-position: 0 -148px;
}

.social_icons_wood_youtube {
  background-position: 0 -222px;
}
```
Step 3 – Copy the HTML

This is an example of how you could use these sprites. This HTML goes with the CSS above. Paste this in your code where you want the sprites to appear. Be sure to edit the urls for the social networks — fill in with your own profile urls. Line 1 is Twitter, line 2 is Google Plus, line 3 is Facebook, and line 4 shows the YouTube icon.
```
<a  class="social_icons_wood_twitter" href="https://twitter.com/#"></a>
<a  class="social_icons_wood_google_plus" href="https://plus.google.com/#"></a>
<a  class="social_icons_wood_facebook" href="https://facebook.com/#"></a>
<a  class="social_icons_wood_youtube" href="https://youtube.com/#"></a>    
```
32px Wood Social Media Icons: Linkedin, Twitter, Google Plus, Facebook

This is a different variety of wood social media icons. These icons appear to be cut out of wood, rather than square wood like the previous icon set.

The other difference with these wood icons is that instead of a YouTube icon, this set includes a Linkedin icon. They include these 4 icons: Linkedin icon, Twitter icon, Google Plus icon, and Facebook icon. They are size 32px. They are glossy wood, dark wood.

These are also smaller than the previous icon set. These are 32px by 32px.

You can either download the package to get the sprite .png image, the required .css file, and a sample HTML for the icons, or you can follow the three steps below.

Here are steps on how to implement these wooden social media sprites icons on your own website:

Step 1 – Download the Sprites Image

This image contains 4 Social CSS sprites, size 64px: Linkedin icon, Twitter icon, Google Plus icon, and Facebook icon. Save this image to your own computer. Right-click it to save:

Step 2 – Copy the CSS

This is the CSS that goes with the sprites above. Paste this into your CSS, and make sure to edit the path to the image on line 5, if needed, depending on where you place sprite image. For example, you may have to change sprites_32.png to ../images/sprites_32.png.
```
.social_icons_wood_32_twitter,
.social_icons_wood_32_google_plus,
.social_icons_wood_32_facebook,
.social_icons_wood_32_linkedin {
  background: url(sprites_32.png) no-repeat;
  display:inline-block;
  width: 32px;
  height: 32px;
  margin:10px 4px;
}

.social_icons_wood_32_google_plus {
 background-position: 0 -42px;
}

.social_icons_wood_32_twitter {
  background-position: 0 -126px;
}

.social_icons_wood_32_linkedin {
  background-position: 0 -84px;
}
```
Step 3 – Copy the HTML

This is an example of how you could use these sprites. This HTML goes with the CSS above. Paste this in your code where you want the sprites to appear. Be sure to edit the urls for the social networks — fill in with your own profile urls. Line 3 is Facebook, line 7 is Google Plus, line 11 displays the LinkedIn icon, and line 15 shows the Twitter icon.
```


<a  class="social_icons_wood_32_facebook" href="https://facebook.com/#"></a>



<a  class="social_icons_wood_32_google_plus" href="https://plus.google.com/#"></a>



<a  class="social_icons_wood_32_linkedin" href="https://linkedin.com/#"></a>



<a  class="social_icons_wood_32_twitter" href="https://twitter.com/#"></a>  
    
```