Trends come and go, minimalism stays. Minimalistic icons and glyph-type icons are still the most used ones around. Icons bring designs and interfaces alive; they engage people and help them interact. Simplicity of them is also their advantage. In this roundup we have prepared 24 clean and minimal icon designs to brighten up your designs. In our collection there are also some premium (really stunning) sets included. Be sure to check licenses before using any of them.
Table of Contents:
- Minimalistic Icons, Less is More
- Free Social Media Icon Sets
- 1WD Social Media Icons Pack + Detailed Tutorial To Make Them From Scratch
- Learn How to Quickly Create Tasty Social Icons using Photoshop
Minimalistic Icons, Less is More
The focal point should always be on on the content of the page. This is where icons of minimalistic design steps in. Let’s dig in!
The icon set contains 58 pixel-perfect icons which you are free to use in personal and commercial projects. The download includes the PSD, the CSH file for the shapes, and PNGs.
A set of 106 pixel perfect icons by Fabio Basile (@fffabs).
A set of 32 icons in 32x32px with subtle and useful icons including e-commerce icons such as shopping basket, price tag, delivery box and more.
GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation. You get 400 small PNGs for free.
A set of 20 clean action icons at 32px x 32px in size and in PNG format, the original PSD is also included. Free for personal and commercial use.
Hand crafted, infinitely scalable icons for user interface designers. 80 icons, 16 by 16px. Photoshop file, CSH file & PNG. Free for personal and commercial use.
A set of 110 icons at 16x16px. Vector and fully scalable. A backlink is required if you use them.
Hand crafted set of 48 icons at 16x16px. PNG, PSD, CSH (custom vector shape). A backlink is required if you use them.
A set of 30 minimal icons at 16x16px. You can also purchase the full version with 110 icons at GraphicRiver.
A set of 108 at 32x32px. Comes as PSD.
A set of 32 icons. .EPS Licensed under Creative Commons 3.0
Delicious Berries Icons is a premium icon set containing 560 vector Photoshop shapes, perfect for apps or projects of any kind. You can download a preview of 50 icons for free.
A set of 350 pixel perfect glyphs icons, perfect for apps, websites or just about anything you can think of. You may use this icon set for both personal and commercial use, which means this resource can be used in any project without worrying about licensing.
A set of 218 UI icons (16px) for free download.
A set of 285 hand drawn 12/12 pixel icons for designers, in a single PSD file. A pack of 33 icons can be downloaded for free.
Set of 209 perfect pixel icons made in16x16 for your projects in a single .psd file. The free pack includes only 20 icons but the price is just too good to not to buy the full set.
17. Jigsoar icons
A free, creative commons licensed custom designed icon set with 60 vector shapes, perfect for the web.
18. Impressionist UI
Impressionist is a kit of UI design elements. It also includes an icon set designed by Sergey Shmidt. You can find all icons in the paid version.
24 social icons in JPG, PNG & PSD format. 21.
20. Vector Icon Set
A set of 35 crisp minimal vector icons.
21. Northwood Icons (premium – $9)
The set includes 150 icons (vector shapes) available in formats .csh and .psd.
22. Aircons (premium – $9)
241 icons glyphs in PNG and PDF – 16×16 px. A CSH to import the vector shapes to Photoshop.
23. 70+ Simple CSS3 Icons (premium – $6)
This is a very high quality icon set made that can be used anywhere and for any purpose. These icons are not limited for a particular use and, hence, you can combine the techniques used here to create new icons or use these techniques in your designs in any way.
A collection of 150 pixel-perfect, mini vector icons. Each one has been optimized for display at sizes as small as 16 x 16 pixels, and they are all infinitely scalable for larger sizes. Multiple formats are included for easy customization, including PSD, EPS, AI, and the original Fireworks source file.
We can’t leave at that, so check below for some great free social media icons.
Free Social Media Icon Sets
Good designed social media icon set is something every designer needs. Therefore, we have gathered some very smart and elegant social media icon packs that you can download and use in your project for free.
This icon set contains 25 scalable vectors complete with semi-transparent shadows for use on various types of backgrounds. The download contains a .zip file with the original .ai file and an .eps version as well.
This icon set includes 20 more stained social media icons for use in your grungy site designs.
This is a beautiful set of social icons. This free download includes a PSD file will fully editable shape layers, plus 56 icon variations in PNG format.
This set includes free Google+ icons along with a 128px optimized version and the standard 16px, 32px, and 64px version of the new red Google+ icon.
This set contains 27 social networks like Digg, Bebo, Blogger, Delicious, Facebok, Zorpia, Youtube, Google+, Scribd, Technorati, Squidoo and Tagged etc – each in 6 different sizes, 3 mouseover states (link, hover and active) and 2 graphic formats (PNG and PSD).
A great, simple, clean black and white social media icons set perfect to be used within minimalism designs. The icon set is available to be used within commercial and non commercial design projects to enjoy.
It contains your favorite social media like Facebook, Twitter, Google +, YouTube, Dribbble, etc. The theme of this set of icons is “Candy” and the designer has created them specifically to match the social media colours.
Simple mini black icons which includes 12 icons in total. The icons would be perfect to be used within mobile interface design.
A simple red subtle grunge social media icons. The icons can be used within commercial and non commercial design projects.
This set contains some beautiful social media icons.
A great free simple mini social media icons set perfect for minimalistic website designs, each icon within the set is 64 pixel by 64 pixels.
The IC Circle Social Icon Set is a social icon set containing 12 icons in two alternate styles colour and greyscale as shown in the preview above. Icons included for rss, twitter, dribbble, vimeo, facebook, forrst, you tube, skype, flickr, share-this, digg and google+.
This freebie is the IC Mini Social Icon Set, this set containing 18 icons in JPG, PNG and PSD format.
This set contains Icons JPG & PNG Format & sizes of 256 x 256, 124 x 124 and 64 x 64 px.
This set contains Google+ Icons with 10 icons in total and original PSD file is included. Icons are 64px x 64px, in both PNG and JPG format.
This set contains 32px social media icons for your project.
This set contains 18 Social Icons In JPG, PNG & PSD Format for you to customize and use however you like.
This set contains awesome free Social Icons for your design.
It consists of 25 professionally designed round icons for social media sites. Also included are a few miscellaneous icons (mail, rss, and apple) that can be used to complete a sharing section on your blog or website.
This icon set contains some beautiful social icons for your design.
IC Minimal Icon Set includes 28 Icons in total all PNG & JPG format and a size of 64px – 64px.
A clean social media icons set, each icon 128 pixels by pixel perfect size for use within web design. The icon set includes 12 icon sets in total, each icon set available to be used within commercial and non commercial design projects.
This icon set contains some beautiful social media icons.
This icon set contains some beautiful social media icons.
Somicro contains 27 icons covering most of the popular social networks out there.
Free Social Media Bookmarking Icon Set consisting of 38 individual icons of the popular social networks/bookmarking sites out there. The set consists of 38 high quality icons in transparency PNG format (64 x 64, 32 x 32).
27. 6 Social Icons
This set contains 6 social icons: google+, facebook, twitter, digg, rss and flickr.
In this set you will find facebook, vimeo, twitter, rss, delicious,technorati, digg and 2 flickr icons, size: 128×128, 64×64,32×32.
This set contains 12 icons: facebook, twitter, google+, rss, dribble, deviantart.
In this icon set you will find facebook, twitter, google+, rss, flickr, yahoo, deviantart, dribble, digg and delicious icons.
Download this irresistible social media icons. Each illustration is 128×128 pixels and represents a “realistic” version of common social media icons.
This is clean and beautiful icon pack of popular social media sites. This icon set contains 12 high quality icons in two different sizes: 48 x 48 and 32 x 32
This is an amazing set of social icons: facebook, twitter, google+, rss, flickr, yahoo, deviantart, dribble, digg and delicious. This free download includes 10 icon variations in PNG format and in 5 different sizes.
35 popular social icons in 32×32 size are included in this free download. The file format is PSD and shape layers were used to allow for resizing of the the icons.
This set contains some beautiful Crystal Blue Social Media Icons.
This set contains some beautiful Woody Social Media Icons Set.
A great carbon chrome social media icons set at decent size of 128 pixels by 128 pixels to be used within commercial web design projects.
A large glossy icon set with a huge resolution of 256 pixels by 256 pixels. The icon set includes 12 icons in total, to be used within your projects.
This is a set of orange glossy simple social icons. In the pack you will find 20 icons in 4 sizes 256x256px, 128x128px, 64x64px, 32x32px. All icons in png format.
This free resource contains 12 black, sleek and stylish social media icons.
Somacro’s icon pack contains two variations of the same icons; one with a border and one without, totalizing 54 icons.
In this set you will find 7 social icons : facebook, twitter, rss, stumbleupon, vimeo, google+, linked. Icons come in one format – PNG and in 3 sizes: 128x128px, 64x64px and 32x32px.
This set contains some beautiful Free Wooden Vector Social Media Icons.
We have some more icons for you and…tutorial how to create them from scratch.
1WD Social Media Icons Pack + Detailed Tutorial To Make Them From Scratch
Nowadays, there are so many graphic designers who have their own style of making icons and buttons. I have my own style too. Take your time to read on my Adobe Photoshop tutorial on making cool icons for your social media buttons. Actually, it can be applied on so many things, not only social media buttons, but I believe this effect could be the best one to be applied on your social media buttons.
I have also made 25 social media icons for 1stwebdesigner readers. But take a look at the tutorial first, then you may download those icons for free.
1. Make A Rounded Rectangle
The size and the color of the rounded rectangle is completely up to you. In this tutorial, I am using 10px radius for the rounded rectangle.
2. Give Effects
3. Add Some Text & Logo
In this example, I am using Futura for “SUBSCRIBE” word and Verdana for the rest. Once again, you may choose your own fonts and elements to be added on the rounded rectangle. I used Futura & Verdana simply because they are my favorite fonts.
4. Add Effect On The Logo (optional)
Do you notice that there is difference on the subscribe logo? This is optional one, you may apply this effect if you want.
Remember to remove background layer before saving your file as .png format. You must save this as .png format if you want to place your button on colored background.
Download PSD file & Fonts
I believe some of you want to apply this effect. I am providing psd file for all of you who wants to apply this effect instantly, without following steps that I’ve explained. I have also provided Futura & Verdana to be downloaded for free.
Some Example That I Already Made
These are some of the buttons that I have made using this cool effect. If you want to see where I used them, just visit my blog. I placed RSS and Twitter button at top sidebar. I have also used Stumble Upon button at the end of every article.
1WD Social Media Icons Pack By Albert Lie
Actually, not all of them are social media icons. I add some icons like friendster, blogger & skype just for fun only.
License: This icons are licensed under GPL v2. You are free to do anything with them. The only requirement is to keep them free for users. There is no attribution link needed and you are allowed to use them in your personal and commercial projects for free.
No, we are not done with tutorials for social media icons either. Let’s take look.
Learn How to Quickly Create Tasty Social Icons using Photoshop
In this tutorial I will show you how to create Tasty social Icons in Photoshop. We will be covering what’s new in the Shape Tools options panel which is the new Stroke. Using this new feature we can now easily make stitches and we can adjust it whatever we want.
This is an excellent tutorial to learn the basics of Photoshop and create something really beautiful out of this learning!
Things you will need for this tutorial:
Here is what we will be making:
Step 1: Setting up the Document
For our workspace create a new Document in Photoshop 570px by 470px and set the background color to #333236.
While selecting the background layer go to Filter – Noise – Add Noise.
Now that we have the background, let’s add a light shade at the center. By doing this use the Brush Tool(B) and brush it in the middle.
Change the layer mode to Soft Light and change the opacity to 50%.
Step 2: Working on the Base Shape
Here is the base shape as you can see in the image below. Basically it’s just an 80px by 120px, #3b5997 Rounded Rectangle Shape with a 5px Radius. Then I modified it using the Direct Selection Tool(A) and Pen Tool by making the top straight and adding an anchor point in the bottom middle and then I dragged it downwards using Direct Selection Tool(U). If you followed my previous tutorial you will know how to properly modify the shape: Recreate Google+ Pages Using Adobe Photoshop.
Apply this Blending Option:
- Stroke: #7796cb, #7b97c6, #324579
- Gradient Overlay:
Here is the result.
Step 3: Adding Pattern
Create a new Document in Photoshop make it 5px by 5px and make sure the background is Transparent.
Fully zoom our canvas by using the Zoom Tool(Z) or by just pressing Ctrl + + on the keyboard. Now that it is fully zoomed use the Pencil Tool(B) and make a pattern as shown in the screenshot below.
Save this document as a pattern by pressing Edit – Define Pattern. Name it whatever you want. Now that we have the pattern apply it to our base shape
- Pattern Overlay:
Step 4: Adding Highlights
We need to add some flavor to our shape by adding some highlights. First thing you need to do is create a layer above the shape and Link it to the base shape by pressing the middle line between them.
Using a Soft Brush Tool(B) brush on the bottom part of the shape and set the layer mode to Soft Light and decrease the Opacity to 80%.
Add another layer, select the Gradient Tool(G) Reflected Gradient, #fff and add it near the top of the shape. Set the layer mode to Soft Light and decrease the Opacity to 50%.
Add another layer again. This time we will create a darker shade. Use Reflected Gradient, #000 and add it at the top part of the shape. set the layer mode to Multiply and decrease the Opacity to 50%.
Step 5: Adding Stitches
Adding Stitches (Dash Stroke) in Photoshop CS6 is very easy. They improved how Shape Tools work and they added an additional option panel for strokes and shape. Don’t worry if you don’t have Photoshop CS6 yet, you can still follow this tutorial. But with Photoshop CS6 I will show you how handy it is. Here is the preview of the options panel of the Shape Tools
- Fill Option Panel
- Stroke Option Panel
To create the stitches first create a shape, the same process we did on the base shape but this time change the width to 70px.
You need to adjust the stroke by clicking the More Options and set the Dash to 5 and Gap to 6. Change the stroke color to #a4b1cf and when you’re done shut the fill color, so that the only thing will show is the stroke.
For CS5 and below, you can do this manually by using the Line Tool(U) 5px each line and 6px gap.
We need to delete the top part stitches. You need to Rasterize the layer and erase the top part stitches.
- Drop Shadow:
Step 6: Adding Icon
You probably have the icons provided in the resource. Place the icon in the center of our base shape.
Apply this Blending Option:
- Gradient Overlay: #dddddd, #fff
- Drop Shadow:
Add the icon name using Text Tool(T).
Duplicate the text layer, change the color to #2b406a and move it up once, using the up arrow key.
Step 7: Adding Shadows
Duplicate the base shape layer and make the fill color to #000000. Place this below the base shape. Now go to Filter – Blur – Gaussian Blur.
Mask the layer and mask the portion that we don’t need. Refer to the screenshot below.
Using Linear Gradient, #000000 add a shadow as shown in the screenshot below.
Add this 1px #515055 line using the Line Tool(U) and place it above the shadow.
Now finish this by masking both ends of the line and the shadow.
And finally we’re done. I hope you learned something from this tutorial. Also, I added 4 more social icons. You can grab the PSD file by clicking the download link below. Until next time. :)