Free Black Social Media Icons

This set of 100 black, circle social media icons includes icons for RSS, Facebook, Twitter, Pinterest and Instagram. There are 20 popular social media icons in five different sizes.

Black Social Media Icons

Click Here to Download the Black Social Media Icons

How to Add Social Media Icons to Your Website

Not sure what to do with the social media icons after you download them? Here are instructions on how to add social media icons to your website.

Want to Make WordPress Your Bitch?

Enter your email address and I'll send you free WordPress tips and tutorials. Next stop, WordPress domination.

Comments

  1. says

    Hello Erica, what an awesome set!

    What I really miss on the set though, is Last.fm icon. If (by any chance) plan to extend the set, I would love if that could be included. Untill then, I will create (probably far more sloppy) something myself. :)

    BTW I love the tutorial for HTML newbies!

    Thanks again! Petr

    • says

      Hi Petr,

      There are no plans to add Last.fm at this time. It’s not needed by most of my clients and readers. You’re the first person to ask for it, but if more people request it I’ll think about adding it to the collection. :)

    • says

      Hi Carrie,

      Are you using WordPress? If so, you can upload the images via the media uploader. Then, to get the URL, go to your Media Library and click on the image. On the right side of the screen, look for ‘File URL’. That’s the URL for that image.

      Hope that helps! Let me know if you have any other questions.

      Julia

      • says

        That was definitely what I needed! However, the images don’t show up as just the cute little circle, you can instead see the white square around them even though the background of my blog is white too. Any suggestions on getting rid of the shadow?

        • says

          It looks like your stylesheet is adding a shadow around the icons. You can add a div tag around the icons in your widget. It would look something like this:

          <div class="SocialMediaIcons">
          [the HTML code you're already using goes here]
          </div>

          Then add the following code to your stylesheet. You can edit your stylesheet by going to Appearance > Editor and selecting Stylesheet from the right side of the screen.

          .SocialMediaIcons img {
          box-shadow: none;
          }

          That should remove the shadow from around the icons.

  2. says

    Hi Julie,

    We really like your icons and want to use them, but we’re new to wordpress and a little confused. We’ve downloaded each icon and uploaded them to our media library on wordpress. We just don’t know what our next step is – like where to paste the links for each icon so that they show up on our sidebar. Could you walk us through the next steps? Thank you so much!

    our site is ivegotthisfriendblog.com

    • says

      You need to add a text widget to your sidebar, then paste the code into the text widget.

      Go to Appearance > Widgets. Drag ‘Text’ from ‘Available Widgets’ to ‘Sidebar’ to add a new text widget. Click the little arrow next to ‘Text’. Paste the social media icon code into the box. Then click the ‘Save’ button.

      If you’re using the hover effect, you’ll also need to add some CSS code to your theme’s stylesheet. Go to Appearance > Editor and select ‘Stylesheet (style.css)’. Then add the code.

      Hope that helps!

  3. says

    hi carrie im currently wanting to upload these icons to my BBlogspot blog but im unsure of how to do so without the wordpress media uploader? any suggestions?

    • says

      Blogger images are stored in a Picasa web album. So you could upload the images to Picasa and use them from there. To get the image URL, click ‘Link to this Photo’ in Picasa, and copy/paste the URL.

  4. says

    Hi! Thank you so much for this direction! I am stuck on trying to get my icons all in one row. Instead, they are all in one column (down). I have tried and tried to figure out how to remove the line break as you’ve directed, but it doesn’t appear to my novice eyes that there is a line break () written into the code between the links, so I don’t know what to remove.. ? Thank you either way!

    • says

      I’d need to see the code to give you an exact answer. But check to make sure there are no spaces or extra lines between each social media icon.

      For example, instead of this:
      1st social media icon code
      2nd social media icon code

      Try this:
      1st social media icon code 2nd social media icon code

      • says

        Here is the code. I understand what you’re saying, but I can’t seem to make it work :/ I do seem to be limited by the margins in the widget section and the lines of the code break when I try to join them continuously. – if that makes sense… below is the code for the current appearance on my blog.






          • says

            I could see the code in the comment email. :)

            Right now you have each social media icon on a separate line, like this:
            pinterest
            tumblr
            twitter

            They need to be like this:
            pinterest tumblr twitter

            Just delete the spaces between each a tag to get rid of the line break. If you still have trouble, feel free to send the code via the contact form on the site.

    • says

      I’d need to see the icons on your site to see why they aren’t showing on the same line. Is each icon appearing on its own line? If so, you need to remove any spaces or line breaks between the icons. Are some icons appearing on the same line, but others appearing on a different line? If so, there are probably too many to fit on one line. Use smaller icons so they can fit on one line.

    • says

      Add this code to the link:
      target="_blank"

      So the full code for one social media icon will look like this:
      <a href="http://twitter.com/PixelFrau" title="Follow Pixel Frau on Twitter" target="_blank"><img src="http://www.yourdomain.com/FILEPATH/filename.png" alt="Pixel Frau Twitter Icon"/></a>

  5. says

    well these are completely fantastic. one slightly complicated question because i am completely CSS illiterate — what if i want the buttons to not just fade in opacity but also fade to a different color? is that a simple CSS fix or super complicated? :) thanks!

    • says

      That can be done with CSS-only buttons. Changing the color of image buttons like these would require two images with two different colors, one that’s the default and one that loads when you hover over the image. It’s a little too complicated to get into here, but I’ve marked your question and will write a tutorial on how to make CSS-only buttons soon.

  6. Paula says

    Really helpful, do you know how to make them appear at the top of a theme just on the homepage, I’m guessing editing in Editor but not sure where to place them?

    • says

      Hi Paula. That would depend on your theme’s widget settings. If you have a widget area that appears at the top of the theme, that’s where you could put the social media icons to appear at the top. What theme are you using?

      • Paula says

        Yeah I don’t have any widgets at the top, it’s ok I have decided against now anyway thanks so much for your help, this is amazing.

  7. says

    my social media icons are not showing up. it says to grab my social media codes from my server. I don’t know what that means. I downloaded the folder and i added whats below each icon but its not showing up. The links are working just not the actual icon image. Please help

    • says

      Downloading the images saves them to your computer, but you then need to upload them to your web host server. That will make the images available to use on your actual website.

      Are you using WordPress? If so, you need to upload the images via the media uploader. Then, to get the URL for each image, go to your Media Library and click on the image. On the right side of the screen, look for ‘File URL’. That’s the URL for that image.

      Replace http://www.yourdomain.com/FILEPATH/filename.png with the URL to the image on your website.

  8. says

    Hi. Thank you for great icons ! I really love those simple ones which i’ve been looking for for a long time. I was wondering if it’s possible to place these icons together in the middle? Right now they’re located to the left side of my blogpost. and also I was wondering if it’s possible to show the icons after every blogpost? Thank you!

  9. says

    Thank you, Julia..
    These collections of black social icon are just awesome. My website’s theme color is black..so i want some black social icon, i’ve find them on your blog.

  10. says

    Hey thanks for all the tips on the social media icons. I have applied them to my fashion lifestyle blog and they look great! Your instructions were so easy thank you!

    <3 Rachel

Join the Conversation

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>