How to Create Your Own Social Media Icons

I’m going to walk you through how to create your own social media icons for your blog. You can create icons that match your design, even if just by using the colours in your palette. πŸ™‚

Requirements

  • Photoshop: I suppose this isn’t really required but my tutorial will be using Photoshop. However, similar results can always be achieved in different programs. But you may not be able to follow my instructions exactly.
  • Internet access: Good news! If you’re reading this, you have it!

Step #1: Collect your icons

The first step is to collect the basic, raw, social media icons. By that I mean only the site logo without any background or design elements.

Decide which sites you want to make icons for, then download the icons. I personally use IconFinder for all my icon searches. You can search for the social media site you want (i.e. “twitter”), set the price to “Free”, and find a raw icon to download.

Example search:

Twitter icon search on IconFinder

To download the image, find a large copy (maybe 256×256 pixels or 64×64 pixels) and download the PNG version of the icon. It’s always better to start with large icons because you can always make them smaller at the end of the project. But if you start out too small, you can’t make them bigger!

So save the file to your computer, then repeat the process for all the sites you need icons for.

Step #2: Set up your Photoshop document

The next step is to create the background for the icons. I usually like to keep these pretty simple and just match the colours of the site I’m working with, but you can take whatever approach you want.

Open up Photoshop and create a large, new document. The document should be slightly larger than the size of the icons you downloaded. So if you downloaded the 256×256 icon, consider creating a document that’s somewhere between 260×260 and 300×300. Ultimately the size doesn’t matter because you can always make things smaller to fit.

Next, create a new layer so that you’re not working on the “Background” layer.

Create a new layer in Photoshop

Step #3: Create a simple background

Ellipse tool

Next we can start by creating a simple, circular background for the icon to sit on. In the toolbar, switch to the Ellipse Tool. We’re going to use this to create a circle.

After activating the ellipse tool, click on the top colour in the toolbar (in the screenshot to the right, that would be the red colour) to open the colour palette. Select the colour you want your circular background to be. Don’t worry, you can change this later!

Next, look at the top bar in Photoshop and make sure your ellipse tool is set to Shape. By setting it to shape (instead of “path” or “pixels”) you will have a coloured background and be able to resize the circle later.

Then, next to the “Shape” dropdown, click the “Fill” colour and set it to the colour you selected from the palette (it should appear under “Recently used colours”).

Set ellipse tool to use "Shape" setting

Finally, you’re ready!

Creating the circle

Move your cursor into the center of the document. Click and start dragging your cursor outwards. As you do so, hold down “Shift” and “Alt” together. Holding down “Shift” will cause your circle to actually be a circle (instead of an oval). Holding “Alt” will cause the circle to be created from the center of your cursor (I find this easier). When you’re happy with your circle, release the mouse click to set it.

Centering the circle

Sometimes your circle still won’t be perfectly center. To center it automatically, hit CTRL+A (or Apple+A on a Mac) to select all. Then switch to the Move Tool by hitting “V”. Then find the alignment options in the top toolbar. You can click each of the middle icons to align the circle vertically and horizontally.

Center a shape in Photoshop

Progress update

So here’s what my document looks like so far:

Plain social media icon background

Now let’s put an icon in there!

Step #4: Add the icons

Next we’re going to put an icon in there! So grab one of your icons and paste it into the document in a new layer. Then resize it if necessary to fit inside the circle.

Twitter social media icon

If you need to change the colour of the icon, you can easily do that. In the layer panel, make sure you have the icon selected. Then click the “Lock transparent pixels” icon.

Lock transparent pixels

Then set the foreground colour to the colour you want to change it to. Then hold the ALT key while you press Delete to apply the colour.

Step #5: Saving your icons

Make sure you repeat the same steps for adding all your other icons. Then you can save them!

First, you want to crop your document so that the circle goes all the way to the edges and that there’s no extra space. To do this, hit “C” on your keyboard to switch to the Crop Tool. Then drag the tool until so that the circle is right up against the edges, as shown below:

Cropping in Photoshop

Then hit “Enter” to apply the crop.

Next, hide the white background layer so that your icons are transparent. Then go to File » Save for Web to start saving. On this screen you can resize your icons if necessary. I usually pick somewhere between 35 and 45 pixels for each icon, but you can play with it! Then just click “Save” when you’re done.

Rinse and repeat for each icon.

You’re done!

Check out my final result:

Twitter icon Facebook icon RSS icon

Get creative!

My tutorial focuses on using a simple circle for a background, but you can experiment! You can use different shapes or you can even experiment with brushes. There are no limits!

Twitter icon Facebook icon RSS icon
Example using a paint brush instead of a circle shape

Share your results!

Photo of Ashley
I'm a 30 year old California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

37 comments

  1. Since you’re using Photoshop, you could use some free extensin, e. g. FlatIcon. You’d get thousands of free icons pasted right into Ps as vector object…

    1. It’s awesome! I used to use it a ton. Now I mostly use Font Awesome for shape/object icons in web designs, but IconFinder is still super useful for other projects or logos.

    1. Wow, drawing them yourself is pretty impressive! I love how your icons turned out. πŸ™‚

  2. Love your bloggy posts like this, and I’ve always wondered how to do this!! Might need to play around with photoshop though, I’ve always wanted to but I have zero skills with that software. I guess on wordpress.com blogs you can’t really do this though? Silly question maybe, but I’m not sure how to actually put these in the sidebar in .com so that when you click on each individual one it would take you to the individual link, seeing as widgets and the like are one image with one destination URL… I’ve been contemplating looking into coding and whatnot a little more, seeing as it’s becoming such a massive deal and stumbled upon this https://www.thebookpeople.co.uk/webapp/wcs/stores/servlet/qs_product_tbp?productId=494778&storeId=10001&catalogId=10051&langId=100 which I thought was hilarious but also possibly useful – if a kid can understand it, it can’t be that difficult…

    1. You can still do this on WordPress.com. πŸ™‚ You just have to use HTML instead of an image widget to do it. You’d upload each of the icons into WordPress (Media » Add New), then create a new text widget and paste in this code for each icon:

      <a href="URL TO SOCIAL MEDIA PROFILE" target="_blank" rel="nofollow"><img src="IMAGE URL" alt="Twitter"></a>

      Just replace the URL TO SOCIAL MEDIA PROFILE with the web address to your profile and IMAGE URL with the URL of the icon you uploaded.

      Then you repeat that same code for each icon. πŸ™‚

    1. Yeah Googling often does the trick too, but IconFinder can be useful if you need like 5 icons that are guaranteed to be good quality, large in size, or transparent. πŸ™‚

  3. This will be great for in the future if I ever get creative and want to play. Currently I have this really great web designer working on a new design for me. πŸ˜‰

    I’m thinking I really need to work with Photoshop because there seem to de endless possibilities that I could use for my posts as well as blog design. Thanks so much for this awesome tutorial!

    Stephanie @ Once Upon a Chapter recently posted: Review: To All the Boys I’ve Loved Before by Jenny Han
    1. I’m trying my best. πŸ™‚ If you have any topics you’d like to see let me know!

  4. THANK YOU for this post!!! actually the one information that I was missing was where to find the “raw” icons…and then I’ll see what I’ll to with them! Your post was the first that had this information! Thank you once again!

    Anna recently posted: From Van Gogh to Kadinsky
  5. Hey, I loved this but I don’t know how to put it on blogspot, can you help me? Or it just works with themes that already came with a option to put the link of your social medias? Thanks already!

    Deyse recently posted: Scarlet - A.C. Gaughen
  6. I didn’t know you could make them yourself! I always had to make do with the default WordPress icons… By the way, how did you make the icon white when the original was black?

Recent Posts

    Random Posts