Using the Free Vector Based Social Media Icon Set as a Source File

Est. Reading Time: 4 minutes

After my last blog Free Social Media Vector Icon Set I received some feedback not understanding why I did it.  Saying you can go to places like Icon Finder and find all you need there.  Icon Finder and many other sites do have a great selection that I do use often but sometimes its hard to find sets that are vector, include all icons I need and are the original colors.

The color is important because though I may want to make them all one color or style later I do not want to have to go find the brand colors when I want to just use the regular icon.

Having all the icons I need in a set is important because I cannot recreate some of the themed icons on icon finder (or other icon sites) to match the others in the set.  So basically if they don’t have the specific icon I need in that set and I cannot match the style then the set is useless to me.

The most important of all is the vectors part.  A lot of times it says you are downloading a vector but you are not.  I was originally just trying to learn how to handle vectors in Adobe Fireworks (I normally use Adobe Illustrator) but it turned into this icon set to give me something to practice with.  I know there is a lot of ways to describe what the difference between a Bitmap and a Vector is but I’m just going to stick with what makes it different when it comes to these icons.

To see if your icon is a bitmap or vector within Adobe Fireworks just look at the layers panel.  If it says ‘Bitmap’ then it is a bitmap and if it says some type of path than it is a vector (may need to ungroup items before this will display). Also you may notice that (when ungrouped) a vector has a path with dots on it when a bitmap simply has the entire rectangle as the outline.  You will understand this more when we try resizing and editing a bitmap vs. a vector.

Bitmap vs Vector



Here is an example when we try resizing the different types.

Bitmap vs Vector Resized

If you see the left Bitmap is really blurry but the right vector is still crisp and clean even at 475px.  In fact you could resize a vector to ANY size and it would keep itself looking crisp and clean since it is based on paths than can scale to any size vs. the bitmaps pixels that have already been flattened together.  This is why Logos are made as vectors to ensure even if you wanted your logo on a HUGE banner that it would still look just as good.


So let’s say we want to change the color to make a set of red icons.  If you notice in the properties tab there are no options for color fill for the bitmap.

Bitmap vs Vector Properties Panel

But still let’s try under filters to add a color fill.

Bitmap vs Vector Color Fill

As you can see that’s not going to do what we need it to. Saving the file as a bitmap basically removed our options of doing anything later.  We cannot easily set the twitters ‘t’ to be a different color or remove that outline.  It is permanently set within the bitmap image.


The main reason why I created the social media icon set was to practice using and creating vectors within Adobe Fireworks.  In the end I ended up with not only a great set for use as is but also a great source file for other icon sets I want to create.  Though I do LOVE the square set as is I have also done some experimentation for other types of icons.  Please see my other blog  Using the Free Social Media Vector Icon Set as a Source File for Other Icon Sets for more examples of using the original social media icon set as a source file for other icon sets.